Bug Repro: Safari cannot convert SVG to WebGL texture correctly

HTML

<script src="http://games.greggman.com/downloads/examples/webgl/resources/webgl-utils.js"></script>

<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_resolution;
varying vec2 v_texCoord;

void main() {
	gl_Position = vec4((a_position / u_resolution) * 2.0 - 1.0, 0, 1);
	v_texCoord = a_texCoord;
}
</script>

<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

uniform sampler2D u_sampler;
varying vec2 v_texCoord;

void main() {
	gl_FragColor = texture2D(u_sampler, v_texCoord);
} 
</script>

<canvas id="canvas" width="256" height="256" style="border: 1px solid black;"></canvas>

JavaScript

"use strict";

main();

function main() {
	var dataUrls = [];

  // Purple circle
  var svg1 = '<svg xmlns="http://www.w3.org/2000/svg" height="128" width="128"><circle cx="60" cy="60" r="50" stroke="yellow" stroke-width="2" fill="purple"/></svg>';
  dataUrls.push("data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg1));
  // Lime triangle
  var svg2 = '<svg xmlns="http://www.w3.org/2000/svg" height="128" width="128"><polygon points="10,90 50,10 90,90" style="fill:lime;stroke:purple;stroke-width:1"/></svg>';
  dataUrls.push("data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg2));
  // Cyan circle
  var svg3 = '<svg xmlns="http://www.w3.org/2000/svg" height="128" width="128"><circle cx="50" cy="50" r="30" stroke="black" stroke-width="2" fill="cyan"/></svg>';
  dataUrls.push("data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg3));
  // Red parallelogram 
  var svg4 = '<svg xmlns="http://www.w3.org/2000/svg" height="128" width="128"><polygon points="10,5 40,5 120,80 90,80 10,5" style="fill:red;stroke:purple;stroke-width:1"/></svg>';
  dataUrls.push("data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg4));
  
  loadImages(dataUrls, render);
}

function loadImages(urls, callback) {
  var images = [];
  var imagesToLoad = urls.length;

  // Called each time an image finished loading.
  var onImageLoad = function() {
    --imagesToLoad;
    // If all the images are loaded call the callback.
    if (imagesToLoad == 0) {
      callback(images);
    }
  };

  for (var i = 0; i < imagesToLoad; i++) {
    var image = loadImage(urls[i], onImageLoad);
    images.push(image);
  }
};

function loadImage(url, callback) {
  var image = new Image();
  image.src = url;
  image.onload = callback;
  return image;
};

function render(images) {
  var canvas = document.getElementById("canvas");
  var gl = getWebGLContext(canvas);
  if (!gl) {
    return;
  }

  var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
  var fragmentShader =...