16

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?

Community
  • 1
  • 1
Jeremy Ricketts
  • 2,601
  • 4
  • 29
  • 28
  • The relevant code is in the video, but I'll try to recreate it in jsFiddle sometime soon. – Jeremy Ricketts Jul 22 '12 at 07:31
  • 1
    The Video link no longer works. – ChrisF Jun 03 '13 at 08:02
  • A jsfidle demonstrating the issue is [here](http://jsfiddle.net/russelluresti/UeNFK/) (courtesy of [this similar question](http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition)). – Benji XVI Jul 24 '14 at 10:32
  • Unfortunately there currently doesn’t seem to be a solution except to degrade font rendering to ‘antialiased’ all the time for these elements, as the tricks in Ian’s answer below seem to do, or to make sure neither they nor any of their ancestors are relatively/absolutely positioned. – Benji XVI Jul 24 '14 at 10:39

1 Answers1

28

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.

Ian Lunn
  • 1,354
  • 14
  • 20