title: Three.js WebGL animation exhibits ghosting in web view on Android 5.1.1 Lollipop
body: <p>I'm using WebGL and three.js to build an augmented reality app. I want to use a transparent web view with WebGL to show 3D content overlaid on a video feed. The problem is I'm getting bad ghosting effects when I set the WebGLRenderer to be transparent by passing it <code>alpha: true</code> to the <code>WebGLRenderer</code> constructor.</p>
  
  <pre><code>    var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
      var canvas = document.getElementById("webGLCanvas");
      var renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
      renderer.setSize( window.innerWidth, window.innerHeight );
  
      var geometry = new THREE.BoxGeometry( 1, 1, 1 );
      var material = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
      var cube = new THREE.Mesh( geometry, material );
      cube.position.z = -5;
      scene.add( cube );
  
      render();
  
      function render()
      {
          requestAnimationFrame(render);
          cube.rotation.x += 0.1;
          cube.rotation.y += 0.1;
          renderer.render(scene, camera);
      }
  </code></pre>
  
  <p>When the animation of the spinning cube runs, it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/2muLA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2muLA.png" alt="spinning cube with ghosting"></a></p>
  
  <p>If I don't pass <code>alpha: true</code> to the <code>WebGLRenderer</code> constructor, the ghosting problem goes away, but then my canvas and web view are not transparent.</p>
  
  <p>Is this a bug in Chrome/WebView on Android Lollipop, or is there some better way to do this?</p>
  
  <p>EDIT: I should mention that this same code does not have the ghosting problem when running in a web view on iOS 8+.</p>