Databases
StackOverflow2013
Postsdbo
POCSS transform translate3d image animation strange anti-aliasing behavior causes jitter
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS transform translate3d image animation strange anti-aliasing behavior causes jitter
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload