5

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.

Community
  • 1
  • 1
Rob Wilkerson
  • 40,476
  • 42
  • 137
  • 192

3 Answers3

13

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.

David Kaneda
  • 5,320
  • 1
  • 21
  • 14
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. :/

zneak
  • 134,922
  • 42
  • 253
  • 328
  • Well, crap. That was the one answer I _didn't_ want to hear. :-) Is there anywhere else I can follow up on this for more info? I can't find squat on Google. Thanks. – Rob Wilkerson Aug 04 '10 at 11:53
  • @Rob Wilkerson: I'll try to search again. I remember animating a png, and during the animation its quality would be lowered, and that was because of the hardware acceleration. I don't remember where I found the info though. – zneak Aug 04 '10 at 15:12
  • In this case, it's not _during_ the animation. Just having those styles active--even when no transformations are active--degrades the quality. – Rob Wilkerson Aug 04 '10 at 18:24
  • 1
    I just got confirmation of this from an Apple employee in their dev forums--https://devforums.apple.com/message/271429#271429. – Rob Wilkerson Aug 04 '10 at 21:09
  • Screenshot of the Apple dev forums posted by Rob: http://imgur.com/MXSGDX8 (the forum is behind a login) – fregante Sep 21 '13 at 00:40
0

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.

Wayferer
  • 109
  • 2
  • 12