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

Question

这个问题几乎是一样的这一个,除了我完全看到它在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

有没有人知道可能导致这种情况的原因或是否可以修复？谷歌并没有非常有用.

谢谢.

Answer 1

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

Answer 2

Safari 中的转换是硬件加速的。它可以提供更好的速度，但渲染不遵循相同的管道，并且会损失一些质量。除了不使用转换之外，您对此无能为力。:/