如何在Safari 5 Mac OS X中使用CSS 3d转换后修复脆皮文本？ [英] How to fix crispy text in Safari 5 Mac OS X after using css 3d transforms?

问题描述

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

I've run into problem when strange behavior is triggered on relative and absolute positioned elements after the element with css 3d transforms applied.

为了解决这个问题，设置背景颜色，但如果我需要透明度，该怎么办？

To fix this I have to set background color, but what if I need transparency?

以下是重现错误的最低要求： http://jsfiddle.net/8VABq/3/

Here is the minimum to reproduce the bug: http://jsfiddle.net/8VABq/3/

推荐答案

这是一个奇怪的错误。

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

My first try involved specifying a transparent background color:

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

但是，这不起作用。事实上，如果你使用alpha值（零），它似乎从crispy（0）到normal（1）。

However, this doesn't work. In fact, if you play with the alpha value (the zero) it seems to range from crispy (0) to normal (1).

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

Wrapping an inner div and specifying position static doesn't work either.

我发现的唯一解决方案是：

The only solution I found was this:

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

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

This, however, makes all your text slightly more blurry because it doesn't use the subpixel antialiasing available on LCD monitors. This may (or may not) be an acceptable workaround.

这篇关于如何在Safari 5 Mac OS X中使用CSS 3d转换后修复脆皮文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！