animation - Safari 在不相关的动画运行时更改字体粗细

Question

我在我的页面上使用 css 动画，当动画运行时，Safari 似乎会更改页面上其他地方不相关的字体粗细。知道为什么会这样吗？所有其他浏览器都可以正常工作，包括像 Chrome 这样的 webkit 浏览器。

我在这里的视频中详细介绍了错误 - http://www.screenr.com/gZN8

站点也在这里 - http://airport-r7.appspot.com/但它可能会继续快速变化。

我在箭头图标上使用罗盘(@transition-property、@transition-duration)。没有对闪烁的标题应用任何转换。在 Mac 上 - 所以它可能是硬件加速，但我仍在努力弄清楚。

Answer 1

当您触发 GPU 合成时(例如，通过 CSS 动画)，浏览器会将该元素发送到 GPU，但如果其顶部/左侧属性发生更改，也会将出现在该元素顶部的任何内容发送到 GPU。这包括在动画元素之后出现的任何 position:relative 元素。

解决方案是给动画元素 position:relative 和一个 z-index 使其高于一切。这样你就可以得到你的动画，但在不相关的元素上保持(高级 IMO)子像素字体渲染。

这是问题和解决方案的演示 http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

更新:较新版本的 Chrome 会在 GPU 合成元素上保留子像素抗锯齿，只要该元素没有透明度，例如，背景没有透明或半透明像素。请注意，像 border-radius 这样的东西会引入半透明像素。