Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WebKit: Blurry text with css scale + translate3d

WebKit: Blurry text with css scale + translate3d

Problem

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;
}
This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.

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.

Problem courtesy of: phil

Solution

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.

Solution courtesy of: Duopixel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

WebKit: Blurry text with css scale + translate3d

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×