Fix rendering in Safari

src/data/program_configuration.js

@@ -5,12 +5,12 @@ import type {GlobalProperties} from "../style-spec/expression/index";
 const createVertexArrayType = require('./vertex_array_type');
 const packUint8ToFloat = require('../shaders/encode_attribute').packUint8ToFloat;
 const VertexBuffer = require('../gl/vertex_buffer');
+const Color = require('../style-spec/util/color');
 
 import type StyleLayer from '../style/style_layer';
 import type {ViewType, StructArray, SerializedStructArray, StructArrayTypeParameters} from '../util/struct_array';
 import type Program from '../render/program';
 import type {Feature, SourceExpression, CompositeExpression} from '../style-spec/expression';
-import type Color from '../style-spec/util/color';
 import type {PossiblyEvaluated, PossiblyEvaluatedPropertyValue} from '../style/properties';
 
 type LayoutAttribute = {
@@ -335,6 +335,11 @@ class ProgramConfiguration {
         return self;
     }
 
+    static forTileClippingMask() {
+        // The color and opacity values don't matter.
+        return ProgramConfiguration.forBackgroundColor(Color.black, 1);
+    }
+
     populatePaintArray(length: number, feature: Feature) {
         const paintArray = this.paintVertexArray;
         if (paintArray.bytesPerElement === 0) return;

src/render/painter.js

@@ -16,7 +16,6 @@ const shaders = require('../shaders');
 const Program = require('./program');
 const RenderTexture = require('./render_texture');
 const updateTileMasks = require('./tile_mask');
-const Color = require('../style-spec/util/color');
 
 const draw = {
     symbol: require('./draw_symbol'),
@@ -242,7 +241,7 @@ class Painter {
         mat4.ortho(matrix, 0, this.width, this.height, 0, 0, 1);
         mat4.scale(matrix, matrix, [gl.drawingBufferWidth, gl.drawingBufferHeight, 0]);
 
-        const program = this.useProgram('fill', ProgramConfiguration.forBackgroundColor(new Color(0, 0, 0, 1), 1));
+        const program = this.useProgram('fill', ProgramConfiguration.forTileClippingMask());
         gl.uniformMatrix4fv(program.uniforms.u_matrix, false, matrix);
 
         this.viewportVAO.bind(gl, program, this.viewportBuffer);
@@ -274,13 +273,14 @@ class Painter {
 
         let idNext = 1;
         this._tileClippingMaskIDs = {};
+        const programConfiguration = ProgramConfiguration.forTileClippingMask();
 
         for (const coord of coords) {
             const id = this._tileClippingMaskIDs[coord.id] = idNext++;
 
             gl.stencilFunc(gl.ALWAYS, id, 0xFF);
 
-            const program = this.useProgram('fill', this.emptyProgramConfiguration);
+            const program = this.useProgram('fill', programConfiguration);
             gl.uniformMatrix4fv(program.uniforms.u_matrix, false, coord.posMatrix);
 
             // Draw the clipping mask