Webkit Text Aliasing Gets Weird During CSS3 Animations

Webkit text aliasing gets weird during CSS3 animations

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.

CSS3 transition messing up fonts in webkit?

What you're seeing is webkit anti-alias your text because it's treating it as a texture as opposed to a vector. There's not much you can do, other than not using transformations, or using an text replacement to provide an image instead of your type.

There's a few related threads regarding webkit aliasing, but I haven't personally had much luck keeping the type as type, and still using transformations.

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

---

edit

There also a Webkit only style declaration -webkit-font-smoothing which takes the values

• none
• subpixel-antialiased
• antialiased

where subpixel-antialiased is the default value.

Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.

See here http://maxvoltar.com/archive/-webkit-font-smoothing

Unexpected letter shaking in animated button

It appears to be related to: How to force re-render after a WebKit 3D transform in Safari. Per the top answer, they suggest switching to non-3D transforms.

A working solution requires changing the CSS from a 3D animation to adjusting the top value as described at: CSS Transition doesn't work with top, bottom, left, right

So if you adjust your CSS to the following it should work:

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}

header{

  height: 95vh;

  background-image: linear-gradient(to right bottom, rgba(3, 119, 252, .8),rgba(3, 186, 252, .8));

  position: relative;

}

.header__text-box{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

}

/* add general style for .btn */

.btn {

  position: relative;

  display: inline-block;

  transition: all .2s;

  top: 0;

}

.btn:link,

.btn:visited{

  text-decoration: none;

  color: #777;

  padding: 15px 25px;

  background-color: white;

  border-radius: 100px;

}

/* animate top */

.btn:hover{

  top: -3px;

}

.btn:active{

  top: -1px

}

<header>

  <div class="header__text-box">

    <a href="#" class="btn">Discover</a>

  </div>

</header>

Why is WebKit not redrawing this text properly?

This looks like a bug in Webkit. You need to let Webkit know that there's painted pixels beyond its bounding box, which you can do in a couple of ways, but here are two that I've found with some quick testing:

#expand {
    height: 0px;
    box-shadow: 0 0 0 5px rgba(0,0,0,0);
}

#expand {
    height: 0px;
    outline: solid transparent 5px;
}

I'm guessing outline has better performance.

It seems to work if you add it #expand or p as well. There's some flags in Chrome which you can enable to see how redraw regions work, but I don't have them handy right now.

Webkit-based blurry/distorted text post-animation via translate3d

As @Robert mentioned above, sometimes adding background helps, but not always.

So, for the example Dmitry added that's not the only thing you must do: except from the background, you must tell browser to explicitly use the proper anti-aliasing, so, there is a fixed Dmitry's example: http://jsfiddle.net/PtDVF/1/

You need to add these styles around (or for the) blocks where you need to fix the anti-aliasing:

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;

Image anti-aliasing after animation

For me, in an embedded WebKit on Mac OS X, using this (non-standard) CSS works to preserve the antialiasing of images during CSS animations:

img {
   image-rendering: optimizeQuality;
}

This may not work for other browsers, of course. The mozilla.org site claims that this behave as an alias of 'auto' but it definitely changes the behaviour in WebKit.

---

Related Topics