防止 webkit 上的闪烁-webkit 的转换-转换

可能的复制品:
Iphone webkit css 动画导致 flicker

由于某种原因，就在 webkit 转换属性的动画发生之前，有一个轻微的闪烁。这就是我正在做的:

CSS:

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

JavaScript:

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

就在转换发生之前，有一个闪烁。你知道为什么会这样，我要怎么解决这个问题吗？

谢谢！

更新: 这只出现在 Safari 中，在 Chrome 中不会出现，尽管这个动画可以工作。

256480 次浏览
小开
最佳答案

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

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

-webkit-backface-visibility: hidden;
小开

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

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

这可能是你想要的效果。如果您正在页面上进行 很多转换，那么它可能非常有用。否则，隐藏在元素上的转换是最不具侵入性的选项。

小开

规则:

-webkit-backface-visibility: hidden;

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

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

搞乱平铺的背景。

我更喜欢制作一个叫做“不要轻拍”的课程，然后这样做:

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

更详细的解释，请看这篇文章:

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

我绝对不会把它涂在整个身体上。关键是要确保你计划在未来转换的任何特定元素开始呈现为3D，这样浏览器就不必切换进出呈现模式。添加

-webkit-transform: translateZ(0)

(或者已经提到的任何一个选项)到动画元素将实现这一点。

小开

我不得不用:

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

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

小开

触发硬件加速问题元素的呈现。为了提高性能，我建议不要在 * 、 body 或 html 标记上执行此操作。

.problem{
-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-backface-visibility: hidden;应用到翻译元素，将 -webkit-transform: translate3d(0,0,0);应用到所有子元素，闪烁就会消失


提交答案