CSS - 固定位置导致Mac上的字体加粗（Safari，Chrome）

Question

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

• Mountain Lion
• Safari 6.0（8536.25）
• Chrome 21.0.1180.89

该页面是一个简单的固定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

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

“拍照”是大胆丢失的地方，因为浏览器/显示器/某些东西正在添加使文本看起来很好的天赋。当然看起来不那么好，但那只是我。

我注意到除了所有白色/黑色之外的其他颜色，它可以表现不同。我希望随着浏览器和渲染的进展，事情会变得平滑。