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

Question

我在页面上使用css动画，并且运行动画时，Safari似乎会更改页面其他位置无关的字体​​权重。知道为什么会这样吗？所有其他浏览器都可以正常运行，包括Chrome等Webkit。

该站点也位于此处但它可能会一直在迅速变化。

我在箭头图标上使用了指南针（@ transition-property，@ transition-
duration）。闪烁的标题上未应用任何过渡。在Mac上-可能是硬件加速，但我仍在尝试解决。

Answer 1

当您触发GPU合成（例如，通过CSS动画）时，浏览器将该元素发送到GPU，但是如果元素的top /
left属性被更改，则该元素还会显示在该元素的顶部。这包括动画后出现的所有position：relative元素。

解决方案是赋予动画元素position：relative和z-
index，将其置于其他所有元素之上。这样，您就可以获取动画，但可以在不相关的元素上保留（高级IMO）亚像素字体渲染。

更新：
较新版本的Chrome保留了GPU复合元素上的亚像素抗锯齿功能，只要该元素不透明即可，例如背景不透明或半透明的像素。请注意，边界半径之类的东西会引入半透明像素。