css - Webkit text aliasing gets weird during CSS3 animations

Question

This is a funky one. And I'm sure it's webkit related since it only seems to be an issue in Chrome Version 20.0.1132.57 and Safari 5.1.7. I've uploaded a short video to explain the issue because it would be nearly impossible to explain via text.

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

Short version: During CSS3 animations, text that is inside a positioned element (absolute or relative) seems to change its antialiasing. It becomes bolder while animations are running.

Note: This is not the same as scaled elements becoming blurry diring an animation. (this issue)

Any thoughts, workarounds, etc?

Answer 1

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

Old answer:

It's WebKit related. Honestly I'm not sure why it does it and I assume it's a bug too. You can prevent it by adding any 3D related CSS3 declaration to any element on the page. Example:

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

Or:

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

The presence of these declarations causes WebKit to use hardware acceleration for the animations which prevents the problem you've pointed out.