CSS - 固定位置导致字体在 Mac(Safari、Chrome)上变粗

Question

我注意到我的 Mac 上的 Chrome 和 Safari 都有一些奇怪的行为:

• 山狮
• Safari 6.0 (8536.25)
• Chrome 21.0.1180.89

该页面是一个简单的固定 div，其中包含一些文本，我添加了第二个 div，该 div 在 5 秒内进行了简单的 CSS 转换，因此您可以轻松地看出差异。我的网络应用程序使用 CSS 转换来显示和隐藏部分，而在执行此操作时，屏幕的大部分似乎都在移动。

我已将示例代码和一个 .mov 文件放在服务器上，希望您会看到同样的问题:

http://physicaltable.com/index.html和 http://physicaltable.com/CSS_JIGGLE_TEST_2.mov

在 Windows 7 上的 Chrome 中不会出现奇怪的粗体，在 iPad 2 (v5.1.1) 上也不会出现

还有其他人遇到过此类问题吗？

Answer 1

我意识到这不是一个很好的答案，但我发现这主要是因为元素的渲染。如果该元素需要使用硬件或任何其他类型的图形渲染，它基本上会获取文本图像，对其进行调整，然后重新渲染文本(如果可以的话)。

“拍照”是失去大胆的地方，因为浏览器/显示器/其他东西正在添加使文本看起来不错的天赋。当然它看起来不太好，但这就是我。

我注意到除了全白/黑之外的不同颜色，它的行为可能会有所不同。我希望随着浏览器和渲染的进步，事情会变得顺利。