-webkit-transform CSS属性软管字体渲染

时间:2010-08-03 12:54:48

标签: css safari webkit css3 safari-extension

这个问题与this one几乎相同,只是我在Mac上的Safari中独家看到它(我唯一需要关注的平台)。它肯定与CSS有关,我想我已经把它缩小到一些似乎对文本呈现方式造成严重破坏的属性。他们是:

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

一旦我禁用这些(通过在前面添加“x”,例如x-webkit-*),文本就可以正常显示。启用任何一个会导致borked文本。以下是一些屏幕截图,可以帮助您看到差异。

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

是否有人知道可能导致此问题的原因或是否/如何修复?谷歌并没有那么大的帮助。

感谢。

3 个答案:

答案 0 :(得分:13)

我认为这实际上可以通过使用-webkit-font-smoothing: antialiased来修复以后的iOS版本(我相信3.2& 4.0)。注意:别名仍然不同,但如果它是动画的,则看起来不那么笨拙。

答案 1 :(得分:1)

Safari中的变换是硬件加速的。它允许更好的速度,但渲染不遵循相同的管道,并且一些质量丢失。除了不使用变换之外,你无能为力。 :/

答案 2 :(得分:0)

今天遇到了这个问题,必须使用transform: scale(1.1) translate3d(0,0,0);http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/)才能使其正常运行。