CSS3 transition / transform / translate3d会在转换的第一个或最后一个“帧”上导致严重的闪烁（在iPad上）
所有，
我正在开发专门针对iPad的网络应用程序，我正在使用CSS3过渡来为div设置动画（从左到右移动）。
我的class级看起来像这样：
.mover { -webkit-transition:all 0.4s ease-in-out; } 当用户单击按钮时，我这样做：
var s = "translate3d(" + newPosition + "px, 0, 0)"; $('.mover ').css('-webkit-transform', s);
除了用户第一次触发转换之外，这种方法效果很好; 第一次，有一个非常明显的闪烁。
我意识到我不需要使用translate3d，因为我只是左右移动div，但据我所知，这迫使iPad使用GPU加速。 （它是否正确？）
提前谢谢了！
[UPDATE]
关于“闪烁”，我有点模棱两可。 简而言之 – 我一直在尝试各种各样的CSS3过渡（特别是在iPad上），并且始终如一 – 我注意到在转换的开始或结束时有明显的闪烁。
换句话说，过渡本身非常顺利。 但是，根据精确设置，在转换开始或结束之前会有明显的闪烁。
这是另一个例子：我有三张照片（PNG）堆叠在一起。
底部PNG的不透明度= 1.0，顶部2的不透明度= 0.0。 使用-webkit-keyframes，当照片淡入和淡出时，我能够获得丝般平滑的过渡。 当动画结束时，底部照片以opacity = 1.0结束，前两个以opacity = 0.0结束。 （这应该是他们的最终状态）。
然而，正如动画结束一样，底部照片闪烁。 就像浏览器强制重绘/重绘屏幕一样，这需要几分之一秒。
破坏效果已经足够糟糕，然后渲染转换不可用。 （在我的iMac上它几乎 ，但不是很难以察觉。在iPad上，这是不容错过的）。
我正在处理同样的问题，我在SO上找到了解决方案： iPhone WebKit CSS动画导致闪烁
它就像添加一样简单
-webkit-backface-visibility: hidden;
可能
-webkit-perspective: 1000;
到每个动画对象。 它对我有用，希望这对你也有帮助
所有，
我不肯定这是答案（特别是因为闪烁本身似乎有点不可预测），但有趣的是 ，这似乎摆脱了它……
无论如何，这就是我在做的事情：
.mover { -webkit-transition:all 0.4s ease-in-out; } var s = "translate3d(" + newPosition + "px, 0, 0)"; $('.mover ').css('-webkit-transform', s);
通常，第一次执行此操作时，我会在动画开始之前看到闪烁。 后续调用将平滑动画。
我推断的是，如果在调用动画之前没有设置3d坐标，你会看到一个闪烁。 第一个调用设置这些坐标，因此后续调用将平滑地设置动画。
所以 – 在尝试任何动画之前，我首先尝试设置div的3d坐标（基本上，当我第一次构建屏幕时 – 即初始化）。
因此，此后 – 当调用3d动画时，div /元素的起始3d坐标已经建立。
这似乎消除了闪烁。
正如我所说 – 我不确定这是否是一个强大，可靠的解决方案，但它肯定已经消除了我当前项目中的问题。
祝好运。
我们通过修复视口解决了许多闪烁和字体问题。
以前我们有内容离开页面（滑动div），当视口没有修复时，设备似乎陷入了混乱，不得不结合显示内容的缩放function处理屏幕上的数据。
头上的这个标签解决了我们的问题。
尝试
.mover { position:absolute; -webkit-transition:-webkit-transform 0.4s ease-in-out; }
但是，据我了解，这迫使iPad使用GPU加速
translate（）和translate3d（）都创建堆叠上下文，并且可以使用层 – 根据GPU的纹理缓冲区。 所以我认为它们在加速方面确实没有任何区别。
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
我注意到当我在div上有hover状态时页面会闪烁，即使我没有附加任何css或js。 我看不到你的HTML，但这可能会有所帮助
我遇到了这个问题并尝试了上述所有建议。 我刚刚发现面部的z-index可能导致问题。
我有3个窗格1中间（平面）两侧的角度像这样\ _ / – 中间的一个是闪烁而z-index高于或相同的两侧。 移动到底部完全固定了闪烁。
希望有所帮助。