Question

98

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

rated 0 times [ 104] [ 6] / answers: 1 / hits: 51337 / 13 Years ago, mon, june 20, 2011, 12:00:00

This issue appears to affect all WebKit-based browsers, including the iPhone.

First some background. The site I'm working on uses a JavaScript-based 'slider' animation.

I'm using -webkit-transform: translate3d to 'power' the actual animation. When using this method, as opposed to a JavaScript-based method, the text becomes all blurry once the content has been animated. This is especially noticeable on the iPhone.

A few workarounds I saw were to remove an relative positioning, which I did, and to add a rule for -webkit-font-smoothing: antialiased, which I also did. Neither change made the slightest difference.

The only way I could make this work properly without blurry text was to use regular JavaScript for the animation and bypass the translate3d altogether. I'd prefer to use translate3d because it performs much faster on WebKit-enabled devices, but for the life of me I cannot figure out why it is affecting the text in such a poor way.

Any suggestions or solutions would be greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalias

Add To Favorites

Follow

Total Points: 79

Total Questions: 116

Total Answers: 116

Location: Malaysia

Member since Wed, May 11, 2022

2 Years ago

answered 13 Years ago austynp · Accepted Answer

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;