如何在使用CSS 3D变换后修复Safari 5 Mac OS X中的文本模糊问题？

Question

当应用了css 3d变换的元素后，相对定位和绝对定位元素触发奇怪的行为问题。

为了解决这个问题，我不得不设置背景颜色，但如果我需要透明度呢？

以下是重现错误所需的最少代码：http://jsfiddle.net/8VABq/3/

- Andrey Kuzmin

---

很奇怪，由于某种原因，它正在去除文本的抗锯齿效果。 - Andrew Marshall

这绝对是Safari的一个bug，我建议提交一个bug报告。 - Andrew Marshall

@Andrew Marshall，我已经向Safari提交了错误报告，但我仍然希望找到解决方法。 - Andrey Kuzmin

他们在最近的版本中修复了这个 bug！ - Andrey Kuzmin

Answer 1

这是一个非常奇怪的 Bug。

我的第一次尝试是指定透明背景颜色：

.crispy {
  position: relative;
  font-size:.9em;
  background: rgba(255,255,255,0);
}

然而，这并不起作用。事实上，如果您调整alpha值（即零），它似乎从脆皮（0）到正常（1）的范围内变化。

包装一个内部div并指定静态位置也不起作用。

我找到的唯一解决方法是这样的：

.crispy {
  position: relative;
  font-size:.9em;
  -webkit-font-smoothing: antialiased;
}

然而，这会使你的所有文本略微变得模糊，因为它没有使用液晶显示器上可用的次像素抗锯齿技术。这可能是（也可能不是）一个可接受的解决方法。

- methodofaction

---

我已将您的答案标记为可接受，但仍然是一种妥协。因此，最好的解决方法是如果可能的话设置 background-color，否则——如果需要透明度，则设置 -webkit-font-smoothing: antialiased;。 - Andrey Kuzmin

字体平滑对我来说效果还不错...这个问题真是棘手，我对这个修复方案感到满意。 - Jon Raasch

Answer 2

我仍然在Safari 5.1中遇到这个错误。对我有用的是自己设置字体平滑。子像素抗锯齿应该是默认的，但显然它不是。如果我将以下内容添加到具有破损字体渲染的元素中，一切看起来都很好：

-webkit-font-smoothing: subpixel-antialiased;

- molf

---

我以为它已经修复了（我的问题中的jsfiddle示例可以正常呈现）。您能否使用最少的元素重现它？ - Andrey Kuzmin

不幸的是，jsfiddle有自己的问题，但这里有一个例子：https://gist.github.com/2489198。请注意，最好的解决方案是使用`-webkit-font-smoothing`和`background-color`。使用ctrl +滚轮缩放以查看微妙的差异。这个问题在浅色字体中非常明显。 - molf

因此，似乎在应用 css3dtransform 的元素之后，-webkit-font-smoothing: subpixel-antialiased 仍然无法正确工作，而他们所做的修复是自动应用 -webkit-font-smoothing: antialiased;，这会消除清晰度，但文本呈现过于细。 - Andrey Kuzmin

Answer 3

你必须进行一些黑客操作，才能找出哪些开关可以关闭Safari在转换中的无别名模式。在这种情况下，如果你去掉webkit-perspective或将其设置为0px，则文本将呈现非常清晰。只有当你进行3D变换并且实际上使用第三个维度并且需要它时，才需要webkit-perspective。

- Michael Mullany

---

我实际上需要3D变换，但在这个例子中，我将其缩小到仅使用“-webkit-perspective”声明。在真实的网站中，我在这个div里面有翻转卡片。 - Andrey Kuzmin