我有一个问题，我的 css3 转换影响了页面上的其他元素，甚至导致它们有点闪烁。我看到了另一篇关于这个的帖子，但他们没有解决这个问题。
http://scosha.mybigcommerce.com/w107b/当您滚动导航时，您会看到动画 css3 转换。它在 Firefox 中运行良好，没有闪烁，但在 chrome 和 safari 中效果非常明显，您可以在下拉菜单项和页脚文本中看到它。
问问题
13683 次
4 回答
29
在 Chrome 中过渡期间闪烁元素的工作解决方案是为父节点设置 CSS：
-webkit-backface-visibility: hidden;
于 2013-11-06T16:19:37.047 回答
12
我的解决方案是将波纹管CSS应用于所有受影响元素的父级。
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
于 2015-01-09T15:27:01.357 回答
11
这是Chrome 22（显然是 Safari）上 Macintosh 文本渲染的一个已知问题。GPU 加速导致 MacOS 从亚像素切换到灰度抗锯齿，这使得字体粗细看起来明显减少。
更新：
正如下面的 OP 所述，修复是应用-webkit-font-smoothing: antialiased- 它始终应用灰度抗锯齿。如果你这样做，你可能会想要增加你的字体权重，因为灰度抗锯齿文本看起来比亚像素更薄
您可以通过应用导致内容始终为 GPU 加速的属性（例如 back-face-visibility: hidden）来获得相同的效果，但因为这些属性并不能保证在未来的浏览器版本中导致 GPU 加速 - 它更面向未来只需指定灰度。
于 2012-10-11T00:31:16.120 回答
-3
我在 Chrome 中遇到了同样的问题，但在 Firefox 中没有。
临时修复是添加web-kit修复并删除过渡：
-webkit-transition: none;
于 2012-10-13T01:48:31.837 回答