关于CSS：防止Webkit转换的Webkit转换闪烁


Prevent flicker on webkit-transition of webkit-transform

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
iphone webkit css animations cause flicker

由于某种原因，在我的webkit-transform属性动画出现之前，有轻微的闪烁。 这是我在做什么：

CSS：

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

JavaScript：

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

在过渡发生之前，会出现闪烁。 知道为什么会这样，如何解决该问题？

谢谢！

更新：仅在Safari中发生。 尽管动画可以工作，但在Chrome中不会发生这种情况。

相关讨论

这里提到了解决方案：iPhone WebKit CSS动画会导致闪烁。

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

1
-webkit-backface-visibility: hidden;

相关讨论

规则：

1
-webkit-backface-visibility: hidden;

不适用于精灵或图片背景。

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

拧紧平铺的背景。

我更喜欢制作一个名为"不轻拂"的类，并执行以下操作：

1
.no-flick{-webkit-transform:translate3d(0,0,0);}
相关讨论

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

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

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

有关更详细的说明，请查看此帖子：

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

我绝对会避免将其应用于整个身体。关键是要确保您将来计划进行转换的任何特定元素都可以在3d模式下开始渲染，这样浏览器就不必切换进出渲染模式。新增中

1
-webkit-transform: translateZ(0)

(或已提及的任何一个选项)动画元素将完成此操作。

相关讨论

我不得不使用：

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

在元素上，否则在页面加载后第一次发生过渡时我仍然会得到flickr

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

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

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

以上两个答案对我来说都存在类似的问题。

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

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