防止webkit转换的webkit转换闪烁

Question

可能重复:
iphone webkit css动画导致闪烁

出于某种原因,在我的webkit-transform属性动画发生之前,有轻微的闪烁.这是我在做的事情:

CSS:

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

JavaScript的:

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

在转换发生之前,有一个闪烁.知道为什么会这样,以及我如何解决问题？

谢谢!

更新:这只发生在Safari中.虽然动画确实有效,但在Chrome中却不会发生这种情况.

Answer 1

这里提到了解决方案:iPhone WebKit CSS动画导致闪烁.

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

-webkit-backface-visibility: hidden;

Answer 2

规则:

-webkit-backface-visibility: hidden;

不适用于精灵或图像背景.

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

搞砸了平铺的背景.

我更喜欢创建一个名为no-flick的类并执行此操作:

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

Answer 3

将此css属性添加到闪烁的元素:

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

(非常感谢Nathan Hoad:http://nathanhoad.net/how-to-stop-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-the-flash/

我肯定会避免将它应用到整个身体.关键是确保您计划在将来转换的任何特定元素开始在3d中呈现,以便浏览器不必切换进出渲染模式.添加

-webkit-transform: translateZ(0) 

(或已经提到的任何一个选项)动画元素将完成此任务.

Answer 6

我发现应用-webkit-backface-visibility: hidden;到翻译元素及其-webkit-transform: translate3d(0,0,0);所有孩子,闪烁然后消失

Answer 7

触发有问题的元素的硬件加速渲染。我建议不要在*，body或html标记上执行此操作以提高性能。

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