-webkit-transform CSS属性软管字体呈现 [英] -webkit-transform CSS Properties Hose Font Rendering

问题描述

这个问题与这个问题大致相同，除了我在Mac上的Safari（我需要关心的唯一平台）上独占。这绝对是CSS相关的，我想我已经把它缩小到几个属性，似乎对文本的渲染方式造成严重破坏。它们是：

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;

一旦我禁用这些（通过添加一个x前缀，例如 x-webkit - * ），文本呈现很好。正在启用任何 选项会产生borked文字。以下是一些可帮助可视化差异的屏幕截图。

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.

任何人都有任何想法可能导致这种或如果/如何可以解决？ Google没有太大帮助。

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

感谢。

推荐答案

Safari中的转换是硬件加速的。它允许更好的速度，但渲染不遵循相同的管道，并且一些质量丢失。没有什么你可以做的，除非不使用transforms。 ：/

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. :/

这篇关于-webkit-transform CSS属性软管字体呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！