CSS 防止 webkit-transform 的 webkit-transition 闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3461441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent flicker on webkit-transition of webkit-transform
提问by devongovett
Possible Duplicate:
iphone webkit css animations cause flicker
For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing:
出于某种原因，就在我的 webkit-transform 属性动画发生之前，有轻微的闪烁。这是我在做什么：
CSS:
CSS：
#element {
-webkit-transition: -webkit-transform 500ms;
}
JavaScript:
JavaScript：
$("#element").css("-webkit-transform", "translateX(" + value + "px)");
Right before the transition takes place, there is a flicker. Any idea why this is, and how I could fix the problem?
就在转换发生之前，有一个闪烁。知道这是为什么吗，我该如何解决这个问题？
Thanks!
谢谢！
Update:this only occurs in Safari. It does not happen in Chrome, although the animation does work.
更新：这只发生在 Safari 中。尽管动画确实有效，但它不会在 Chrome 中发生。
回答by rpitting
The solution is mentioned here: iPhone WebKit CSS animations cause flicker.
这里提到了解决方案：iPhone WebKit CSS animations cause flicker。
For your element, you need to set
对于您的元素，您需要设置
-webkit-backface-visibility: hidden;
回答by ablemike
The rule:
规则：
-webkit-backface-visibility: hidden;
will not work for sprites or image backgrounds.
不适用于精灵或图像背景。
body {-webkit-transform:translate3d(0,0,0);}
screws up backgrounds that are tiled.
搞砸平铺的背景。
I prefer to make a class called no-flick and do this:
我更喜欢创建一个名为 no-flick 的类并执行以下操作：
.no-flick{-webkit-transform:translate3d(0,0,0);}
回答by Michael Bar-Sinai
Add this css property to the element being flickered:
将此 css 属性添加到正在闪烁的元素：
-webkit-transform-style: preserve-3d;
(And a big thanks to Nathan Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)
（非常感谢 Nathan Hoad：http: //nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit）
回答by Dan Tello
For a more detailed explanation, check out this post:
有关更详细的解释，请查看此帖子：
http://www.viget.com/inspire/webkit-transform-kill-the-flash/
http://www.viget.com/inspire/webkit-transform-kill-the-flash/
I would definitely avoid applying it to the entire body. The key is to make sure whatever specific element you plan on transforming in the future starts out rendered in 3d so the browsers doesn't have to switch in and out of rendering modes. Adding
我绝对会避免将它应用于整个身体。关键是要确保您计划在未来转换的任何特定元素以 3d 开始渲染，这样浏览器就不必切换渲染模式。添加
-webkit-transform: translateZ(0)
(or either of the options already mentioned) to the animated element will accomplish this.
（或已经提到的任何一个选项）到动画元素将实现这一点。
回答by Kevin H
I had to use:
我不得不使用：
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
on the element, or I would still get a flickr the first time a transition occurred after page load
在元素上，否则在页面加载后第一次发生转换时我仍然会得到一个 flickr
回答by Adam Carter
I found that applying the -webkit-backface-visibility: hidden;to the translating element and -webkit-transform: translate3d(0,0,0);to all its children, the flicker then disappears
我发现将 应用于-webkit-backface-visibility: hidden;翻译元素及其-webkit-transform: translate3d(0,0,0);所有子元素，然后闪烁消失
回答by dontmentionthebackup
Trigger hardware accelerated rendering for the problematic element. I would advice to not do this on *, body or html tags for performance.
为有问题的元素触发硬件加速渲染。我建议不要在 *、body 或 html 标签上这样做以提高性能。
.problem{
-webkit-transform:translate3d(0,0,0);
}
回答by Eric D. Fields
Both of the above two answers work for me with a similar problem.
以上两个答案都对我有类似的问题。
However, the body {-webkit-transform} approach causes all elements on the page to effectively be rendered in 3D. This isn't the worst thing, but it slightly changes the rendering of text and other CSS-styled elements.
但是，body {-webkit-transform} 方法会导致页面上的所有元素有效地以 3D 形式呈现。这不是最糟糕的事情，但它稍微改变了文本和其他 CSS 样式元素的呈现。
It may be an effect you want. It may be useful if you're doing a lotof transform on your page. Otherwise, -webkit-backface-visibility:hidden on the element your transforming is the least invasive option.
这可能是你想要的效果。如果您在页面上进行大量转换，它可能会很有用。否则， -webkit-backface-visibility:hidden 在您转换的元素上是侵入性最小的选项。
