防止WebKit-Transform的WebKit-Transition闪烁[重复

Question

可能的重复：
iPhone Webkit CSS动画会引起闪烁

由于某种原因，就在我对WebKit-Transform属性的动画动画之前，有轻微的闪烁。这是我在做的事情：

CSS：

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

JavaScript：

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

在过渡发生之前，有一个闪烁。知道为什么这是什么，以及我如何解决问题？

谢谢！

更新： 这仅发生在野生动物园中。尽管动画确实起作用，但它并没有发生在铬中。

Answer 1

这里提到了解决方案： iPhone Webkit CSS动画会引起闪烁.

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

-webkit-backface-visibility: hidden;

Answer 2

规则：

-webkit-backface-visibility: hidden;

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

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

拧紧瓷砖的背景。

我更喜欢做一个名为“无灯”的课程，然后这样做：

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

Answer 3

将此CSS属性添加到闪烁的元素中：

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

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

Answer 4

我必须使用：

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

在元素上，否则我仍然会在第一次过渡后第一次出现flickr。

Answer 5

有关更详细的说明，请查看这篇文章：

http://www.viget.com/inspire/webkit-transform-kill-kill-the-flash/

我绝对会避免将其应用于整个身体。关键是要确保您打算将来打算转换的任何特定元素以3D渲染，以便浏览器不必切换和从渲染模式中切换。添加

-webkit-transform: translateZ(0) 

（或者已经提到的任何一个选项）到动画元素将实现这一目标。

Answer 6

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

Answer 7

触发有问题元素的硬件加速渲染。我建议不要在 *，身体或HTML标签上进行性能。

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

Answer 8

以上两个答案对我来说也有类似的问题。

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

这可能是您想要的效果。如果您正在做一个 很多 页面上的转换。否则，-webkit-backface-visibility：隐藏在您的转换元素上是最不可侵犯的选项。