防止Webkit转换的webkit转换闪烁

可能重复：
iPhone的WebKit的CSSanimation导致闪烁

出于某种原因，就在我的webkit-transform属性发生animation之前，会有轻微的闪烁。这是我在做什么：

CSS：

#element { -webkit-transition: -webkit-transform 500ms; }

JavaScript的：

 $("#element").css("-webkit-transform", "translateX(" + value + "px)");

在转换发生之前，有一个闪烁。任何想法为什么这是，我怎么可以解决这个问题？

谢谢！

更新：这只发生在Safari。在Chrome中不会发生这种情况，尽pipeanimation确实有效。

这里提到的解决scheme是： iPhone的WebKit CSSanimation导致闪烁。

对于你的元素，你需要设置

 -webkit-backface-visibility: hidden;

规则：

 -webkit-backface-visibility: hidden;

将不适用于精灵或图像背景。

 body {-webkit-transform:translate3d(0,0,0);}

拧上平铺的背景。

我更喜欢做一个叫做不轻弹的类，并且这样做：

 .no-flick{-webkit-transform:translate3d(0,0,0);}

将这个CSS属性添加到正在闪烁的元素：

 -webkit-transform-style: preserve-3d;

（非常感谢Nathan Hoad： http : //nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit ）

我不得不使用：

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

在元素上，或者我还是会在页面加载后第一次发生转换时得到一个flickr

有关更详细的解释，请查看此帖：

我一定会避免把它应用到整个机构。关键是要确保你计划在未来转换的特定元素开始以3d渲染，因此浏览器不必切换进入和退出渲染模式。添加

 -webkit-transform: translateZ(0)

（或者已经提到的任何一个选项）到animation元素将完成这个。

我发现应用-webkit-backface-visibility: hidden; 到翻译元素和-webkit-transform: translate3d(0,0,0); 给所有的孩子，闪烁消失

触发硬件加速呈现有问题的元素。我会build议不要在*，body或html标签上执行此操作。

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

上述两个答案都适用于我的类似问题。

但是，body {-webkit-transform}方法会使页面上的所有元素有效地以3D呈现。这不是最糟糕的事情，但它稍微改变了文本和其他CSS风格元素的渲染。

这可能是你想要的效果。如果您在页面上进行大量转换，这可能会很有用。否则，-webkit-backface-visibility：隐藏在元素上，你的转换是侵入性最小的选项。