我在页面上使用css动画,并且运行动画时,Safari似乎会更改页面其他位置无关的字体权重。知道为什么会这样吗?所有其他浏览器都可以正常运行,包括Chrome等Webkit。
该站点也位于此处但它可能会一直在迅速变化。
我在箭头图标上使用了指南针(@ transition-property,@ transition- duration)。闪烁的标题上未应用任何过渡。在Mac上-可能是硬件加速,但我仍在尝试解决。
当您触发GPU合成(例如,通过CSS动画)时,浏览器将该元素发送到GPU,但是如果元素的top / left属性被更改,则该元素还会显示在该元素的顶部。这包括动画后出现的所有position:relative元素。
解决方案是赋予动画元素position:relative和z- index,将其置于其他所有元素之上。这样,您就可以获取动画,但可以在不相关的元素上保留(高级IMO)亚像素字体渲染。
更新: 较新版本的Chrome保留了GPU复合元素上的亚像素抗锯齿功能,只要该元素不透明即可,例如背景不透明或半透明的像素。请注意,边界半径之类的东西会引入半透明像素。