title: Rendering a video with webGL in IOS 10 beta 7 (Safari) - shows weird purplish colors
body: <p>I'm rendering a video in webGL, by passing a <code>Video</code> object as the source for <code>texImage2D</code>. <br> This works great in all platforms (that supports webGL), however in Safari in IOS 10 beta 7, it is rendered with weird colors (in previous IOS versions it looks ok).</p>
  
  <p>For example, this is an image frame from it, that looks how it's supposed:
  <a href="https://i.stack.imgur.com/UIfX1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIfX1.png" alt="enter image description here"></a></p>
  
  <p>And this is how it's rendered in IOS 10 (the weird version):</p>
  
  <p><a href="https://i.stack.imgur.com/tEhhI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tEhhI.png" alt="enter image description here"></a></p>
  
  <p>Is this an IOS10 beta bug?</p>
  
  <p>Here is the render code (that happens for each frame):</p>
  
  <pre><code>gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);        
  gl.bindTexture(gl.TEXTURE_2D, frameTexture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  gl.bindTexture(gl.TEXTURE_2D, null);
  </code></pre>
  
  <p><code>frameTexture</code> is a 2D texture created before. <code>video</code> is a <code>Video</code> object.<br>
  The vertex buffers have been initialized before to form a rectangle that <code>holds</code> the image.</p>
  
  <p>These are the shaders:</p>
  
  <p><strong>Vertex</strong></p>
  
  <pre><code>attribute vec3 a_position;
  attribute vec2 a_texCoord;
  uniform vec2 u_resolution;
  varying vec2 v_texCoord;
  
  void main() {
      vec4 pos = vec4(a_position, 1.0);
      vec2 xy = vec2(pos.x,pos.y);
  
      // convert the rectangle from pixels to 0.0 to 1.0
      vec2 zeroToOne = xy / u_resolution;
      // convert from 0-&gt;1 to 0-&gt;2
      vec2 zeroToTwo = zeroToOne * 2.0;
      // convert from 0-&gt;2 to -1-&gt;+1 (clipspace)
      vec2 clipSpace = zeroToTwo - 1.0;
      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
      // pass the texCoord to the fragment shader
      // The GPU will interpolate this value between points.
      v_texCoord = a_texCoord;        
  }
  </code></pre>
  
  <p><code>u_resolution</code> gets the width and height of the video from the JS, before.</p>
  
  <p><strong>Fragment</strong></p>
  
  <pre><code>precision mediump float;
  
  // our texture
  uniform sampler2D u_image;
  // the texCoords passed in from the vertex shader.
  varying vec2 v_texCoord;
  
  void main() {
     gl_FragColor = texture2D(u_image, v_texCoord);
  }
  </code></pre>
  
  <p>I tried several videos - same result. Though I noticed that whites and blacks looks normal and are rendered ok.</p>
  
  <p>If this is not an IOS10 bug in webGL - any idea what can cause this?<br>
  (I should note, that I am not very experienced with webGL)</p>