-webkit-transform CSS Properties Hose Font Renderi

Question

This question is pretty much the same as this one except that I'm seeing it exclusively in Safari on Mac (the only platform I need to care about). It's definitely CSS-related and I think I've narrowed it down to a few properties which seem to wreak havoc on the way text is rendered. They are:

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-perspective: 2500;

As soon as I disable these (by prefixing them with an "x", e.g. x-webkit-*), the text renders fine. Enabling any one of them results in the borked text. Here are a couple of screenshots that may help visualize the difference.

http://s3.amazonaws.com/codaset/ticket/6404/665/good.png http://s3.amazonaws.com/codaset/ticket/6404/666/bad.png

Does anyone have any idea what might be causing this or if/how it can be fixed? Google hasn't been terribly helpful.

Thanks.

Answer 1

Came across this issue today and had to use transform: scale(1.1) translate3d(0,0,0); (http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/) to get it working.

Answer 2

Transforms in Safari are hardware-accelerated. It allows for much better speed, but the rendering doesn't follow the same pipeline, and some quality is lost. There's nothing you can do about it, except not use transforms. :/

Answer 3

I think this is actually possible to fix in later iOS revisions (I believe 3.2 & 4.0) by using -webkit-font-smoothing: antialiased. Note: The aliasing will still be different, but will look less awkward if it's animated.