问题
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.
回答1:
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. :/
回答2:
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.
回答3:
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.
来源：https://stackoverflow.com/questions/3396638/webkit-transform-css-properties-hose-font-rendering