CSS - 固定位置导致 Mac 上的字体变粗（Safari、Chrome）答案

【问题标题】：CSS - Fixed position causes font to bold on Mac (Safari, Chrome)CSS - 固定位置导致 Mac 上的字体变粗（Safari、Chrome）
【发布时间】：2013-04-25 01:49:13
【问题描述】：

我注意到我的 Mac 上的 Chrome 和 Safari 出现了一些奇怪的行为：

山狮
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) 上也不会出现这种情况

还有其他人看到过这种类型的问题吗？

【问题讨论】：

您将文本包装在<h3> 元素中，默认情况下呈现粗体。
是的，但是当动画停止时文本会变粗。该视频显示了 B 文本的明显变化。
上次我检查时视频无法播放...让我再看一遍。
更新：Chrome 已经更新到版本 22.0.1229.79，它不再这样做了。 Safari 仍然存在这个问题（整个事情可能只是等待修复的到来）。

标签： css google-chrome safari

【解决方案1】：

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

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

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

【讨论】：