WebKit: Blurry text with css scale + translate3d

Question

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied.

Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.)

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

Are there any known workarounds for this? I get that in the simple example above, I could simply use translate rather than translate3d - the point here is to strip the code down to the bare essentials.

Answer 1

Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.

See here: http://jsfiddle.net/SfKKv/

Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.

Answer 2

I found that using:

-webkit-perspective: 1000;

on the container of your font or icon set kept things crisp for me after experiment with the issue on Android nexus 4.2 for sometime.

Answer 3

A css filter effect is a graphical operation that allows to manipulate the appearance of any HTML element. Since Chromium 19 these filters are GPU accelerates to make them super fast.

CSS3 introduces a bunch of standard filter effects, one of them is the blur fitler:

-webkit-filter: blur(radius);

The ‘radius’ parameter affects how many pixels on the screen blend into each other, so a larger value will create more blur. Zero of course leaves the image unchanged.

Set the radius to 0 will force browser to use GPU calculation and force it to keep your html element unchanged. It's like applying an "hard edges" effects.

So the best solution for me in order to fix this blurry effect was to add this simple line of code:

-webkit-filter: blur(0);

There is also a known bug that only affects retina screens. (See here: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?). So in order to make it works also for retina, I recommend to add this second line:

-webkit-transform: translateZ(0);