8 回答
令人沮丧吧？
请参阅 EDIT4 了解为什么 2000px 是一个神奇数字的答案。
您可以尝试几件事。
添加
-webkit-transform-style: preserve-3d;到闪烁的元素。添加
-webkit-backface-visibility: hidden;到
闪烁的元素。将动画元素移到闪烁
元素所在的父级之外。
编辑— Wesley Hales，在这里说 “我在对已经加速的页面部分应用硬件加速时遇到了故障行为”
很难在没有任何代码的情况下帮助您调试它。但对于初学者，我建议您在 safari 中打开调试模式。在终端中写入“defaults write com.apple.Safari IncludeInternalDebugMenu -bool true”。
之后会出现一个调试菜单。选择绘图/合成标志 > 显示合成边框。
这将帮助您查看正在渲染的内容，并由此选择要放入硬件加速的内容以及要省略的内容。
EDIT2 — 这也值得一试：fast-animation-with-ios-webkit
它是关于 iOs 的，但我经历过——在某些情况下——适用于 iOs 的解决方案也适用于 osx。
EDIT3——如果你只是问当它大于 2000 像素时会发生什么，我可以肯定地告诉你，在 iPhone 上，WebKit 创建不大于 1024 x 1024 的纹理，如果你的元素大于那个，它必须创建多个纹理。
现在，当他们在 iPhone 上执行此操作时，如果他们在 OsX 上执行相同操作，我不会感到惊讶，但有更高的限制。
不知道这是不是你的情况。没有任何代码是无法分辨的。
EDIT4 —“TextureMapperTiledBackingStore 中的实现非常简单，仅用于解决 OpenGL 中 2000x2000 纹理大小的限制。”
因此，如果您的元素大于 2000x2000，则必须创建多个纹理。
我发现将 应用于-webkit-backface-visibility: hidden;翻译元素及其-webkit-transform: translate3d(0, 0, 0);所有子元素后，闪烁就会消失。
如果字体闪烁，请使用以下 CSS：
html,body {
-webkit-font-smoothing: antialiased;
}
我注意到，在 Chrome 中应用 CSS3 转换后，元素看起来有点“脆”并且文本未对齐。Mathias 答案中的解决方案对此没有影响。但这是奇怪的事情——在我应用了 webkit 过滤器（即-webkit-filter: opacity(0.99999);）之后，元素正确呈现并且文本中的字母对齐。但在那之后，这些元素看起来有点模糊。也许这对你的闪烁有影响。
首先，感谢这里提供的出色解决方案。过去我一直认为我的代码一定有问题。不是。我还推断出动画不再流畅运行的 2000 像素边框。谢谢你们，我现在添加
/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
.boxContent {
-webkit-backface-visibility: hidden;
}
}
我这样做是有条件的，因为事实上，添加类后图片不会呈现抗锯齿。在另一个地方我做过
/*keep animation smooth in Safari above 2000px*/
.twothousand {
-webkit-backface-visibility: hidden;
}
并通过 JQuery 添加和删除附加类。所以过渡是平滑的，并且在完成后渲染（再次删除类）有点复杂，但它对我来说效果很好，最终使 Safari 中的动画超过 2000px 平滑。干得好，伙计们！！
我也有同样的问题。当我在浏览器mat-icon中打开我的角度应用程序时开始闪烁。Safari它在Chrome浏览器中运行良好。经过上面回答的所有选项后，我的问题无法得到解决。所以最后，我将transitionmy 的属性设置fab-button为none. 它解决了这个问题。
解决我所有问题的简单解决方案是：
.app * {
transform-style: preserve-3d;
}