一尘不染

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

css

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

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

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


阅读 331

收藏
2020-05-16

共1个答案

一尘不染

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

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

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

2020-05-16