Webkit text aliasing gets weird during CSS3 animations

css webkit css-animations
Jeremy Ricketts picture Jeremy Ricketts · Jul 21, 2012 · Viewed 12.7k times · Source

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

Ian Lunn picture Ian Lunn · Jul 21, 2012

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.

Related questions

css3 transition animation on load?

Is it possible to use CSS3 transition animation on page load without using Javascript? This is kind of what I want, but on page load: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html What I found so far CSS3 …

Read More
Blurry text after using CSS transform: scale(); in Chrome

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } If you visit http://…

Read More
CSS3 animations with transform causes blurred elements on Webkit

So I've got some native elements (divs) with various effects applied to them (border-radius, box-shadow and transform: scale()). When I animate them, two weird things happen: Even though I'm not trying to animate the scale, if I don't put the …

Read More