如何在 iOS 6 中使用 Webkit 变换和过渡时修复闪烁答案

【问题标题】：How to fix flicker when using Webkit transforms & transitions in iOS 6如何在 iOS 6 中使用 Webkit 变换和过渡时修复闪烁
【发布时间】：2013-07-11 04:26:37
【问题描述】：

我们已经为 ipad 构建了一个 HTML5 应用程序，它使用 Webkit 变换和动画过渡。过去我们不得不使用-webkit-transform: translate3d(0,0,0); 来启用硬件加速以防止动画闪烁并显得流畅。我们已经更新到 iOS 6，但这种技术似乎不再有效。是否有一种新方法可以在 iOS 6 中为动画调用硬件加速？

【问题讨论】：

标签： ipad css ios6

【解决方案1】：

试试这个：

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

【讨论】：

我用-webkit-perspective: 1000; -webkit-backface-visibility: hidden;替换了我使用-webkit-transform: translate3d(0,0,0);的所有实例，它成功了，谢谢！

【解决方案2】：

Apple 在 iOS6 中更改了 safari，以便 using translate3d doesn't automatically trigger GPU acceleration。我认为人们现在正在尝试不同的方法来弄清楚如何实现这一目标。

【讨论】：

他们为什么要这么做？？太令人沮丧了！如果您确实遇到任何解决方法，请告诉我。谢谢！

【解决方案3】：

我最终通过将 translate3d(0, 0, 0) 应用于我正在转换的内容中的每个元素来解决此问题。

.content * { -webkit-transform:translate3d(0,0,0); }

【讨论】：