title: CSS transform translate3d image animation strange anti-aliasing behavior causes jitter
body: <p>I have a jsFiddle example of an image animating from left to right using CSS3 translate3d, here:  <a href="http://jsfiddle.net/Rhx2K/3/" rel="nofollow">http://jsfiddle.net/Rhx2K/3/</a></p>
  
  <p>I have a requestAnimationFrame looping 60fps and setting the left position of a JPG image on every frame at sub-pixel intervals.</p>
  
  <pre><code>var image1 = document.getElementById('image1');
  var image2 = document.getElementById('image2');
  
  var image1Left = 0;
  var image2Left = 0;
  var subpixel   = 1 / 64;
  
  var _run = function(){
      window.requestAnimFrame(_run);
      image1Left += subpixel * 5;
      image2Left += subpixel;
      image1.style.webkitTransform  = 'translate3d('+image1Left+'px, 0px, 0px)';
      image2.style.webkitTransform  = 'translate3d('+image2Left+'px, 0px, 0px)';
  }
  
  _run();
  </code></pre>
  
  <p>I put two images in the example.  They are both doing the same thing, just the top one is moving faster.  Notice how it has this stair-stepping effect.  The image itself gets translated at the subpixel level.  Notice how the image moves at constant rate - you can see the trees seem to glide along, but that the left and right side are jittering.  After experimenting, I realized that the anti-aliasing is greater the further away from the pixel.  For example at left: 1px, there is no anti-aliasing, but at left: 1.2px, there is some, then at left: 1.5px there is more.  At left: 1.7px there is less, and then at 2px, there is none.  So the wobble here is due to the relative anti-aliasing at each subpixel step.  This would make sense if it didn't cause this jitter.  </p>
  
  <p>This happens also when using a webkit transition on the transform.  <a href="http://jsfiddle.net/Rhx2K/5/" rel="nofollow">http://jsfiddle.net/Rhx2K/5/</a></p>
  
  <p>Is this standard behavior?  It seems to be a bug with webkit itself.  </p>
  
  <p>My way around it has been to animate by pixel values only, as seen here:  <a href="http://cmivfx.com/home" rel="nofollow">http://cmivfx.com/home</a></p>
  
  <p>With pixel values (vs subpixel values), no antialiasing is added to the image and so the animation looks really smooth... the only problem I have that point is that full pixel increments cause the image to move too fast.  I need subpixel increments to slow down the animation.</p>
  
  <p>I've tried all of these....</p>
  
  <pre><code>-webkit-transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  </code></pre>
  
  <p>None of that is the answer.  How do I get the translate3d animation to look good at sub-pixel increments?</p>