如何在使用css 3d变换后修复Safari 5 Mac OS X中的松脆文本？

Question

在应用了css 3d变换的元素之后,在相对和绝对定位元素上触发奇怪的行为时,我遇到了问题.

要解决这个问题,我必须设置背景颜色,但如果我需要透明度呢？

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

Answer 1

这确实是一个奇怪的错误.

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

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

但是,这不起作用.实际上,如果你使用alpha值(零),它似乎从crispy(0)到normal(1).

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

我找到的唯一解决方案是:

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

但是,这会使您的所有文本更加模糊,因为它不使用LCD显示器上可用的子像素抗锯齿.这可能(或可能不)是可接受的解决方法.