Webkit text smoothing gets weird during CSS3 animations

Question

This is scared. And I'm sure this is due to webkit, as this seems to be a problem in Chrome Version 20.0.1132.57 and Safari 5.1.7. I uploaded a short video to explain the problem, because it would be impossible to explain using text.

Video: http://youtu.be/0XttO-Diz2g

Short version: During CSS3 animation, text inside a positioned element (absolute or relative) seems to replace its smoothing. He becomes bolder during the animation.

Note: This is not the same as scaled elements becoming blurry during animation. ( this question )

Any thoughts, workarounds, etc.?

Answer 1

Update: my old answer below works, but this is just a hacker way to solve the problem. Instead, read this for the reason why other elements are affected: http://jsbin.com/efirip/5/quiet . In short: an animated element should be placed in its own stacking context, giving it a z-index .

Old answer:

It is associated with WebKit. Honestly, I’m not sure why he is doing this, and I guess this is also a mistake. You can prevent this by adding any 3D CSS3-related declaration to any element on the page. Example:

 body { -webkit-transform: translateZ(0); } 

Or:

 body { -webkit-backface-visibility: hidden; } 

The presence of these advertisements forces WebKit to use hardware acceleration for animations, which prevents this issue.