小编典典

CSS3转换会影响Chrome / Safari的其他元素

css

我遇到了一个问题,我的css3转换会影响页面上的其他元素,甚至导致它们闪烁。我看到了另一篇关于此的文章,但是他们没有解决该问题的方法。

当您滚动导航时,您会看到动画的css3转换。在Firefox中它可以正常工作而不会闪烁,但是对于chrome和safari,效果非常明显,您可以在下拉菜单项和页脚文本中看到它。


阅读 304

收藏
2020-05-16

共1个答案

小编典典

这是Chrome22(显然是Safari)上Macintosh文本呈现的一个已知问题。GPU加速导致MacOS从亚像素切换到灰度抗锯齿,这使得字体粗细似乎明显降低。

更新:

如下面的OP所述,此修复程序将适用-webkit-font-smoothing: antialiased-它始终应用灰度抗锯齿。如果这样做,由于灰度抗锯齿文字看起来比亚像素细得多,因此您可能想在所有位置增加字体粗细

您可以通过应用一些属性来获得相同的效果,这些属性会导致内容始终被GPU加速(例如背面可见性:隐藏),但是由于不能保证这些属性在将来的浏览器版本中会导致GPU加速-将来可以证明只需指定灰度即可。

2020-05-16