blocks|key|3242867|text|这里提到了解决方案：iPhone+WebKit+CSS+animations+cause+flicker。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3242868|对于您的元素，您需要设置|3242869|-webkit-backface-visibility:+hidden;|code-block|syntax|javascript|3242870|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker^0|A|16|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

The solution is mentioned here: <a href="https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker">iPhone WebKit CSS animations cause flicker</a>.

For your element, you need to set 

<pre><code>-webkit-backface-visibility: hidden;
</code></pre>

blocks|key|300199|text|规则是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300200|-webkit-backface-visibility:+hidden;|code-block|syntax|javascript|300201|不适用于精灵或图像背景。|300202|body+{-webkit-transform:translate3d(0,0,0);}|300203|弄乱平铺的背景。|300204|我更喜欢创建一个名为no-flick的类，并这样做：|300205|.no-flick{-webkit-transform:translate3d(0,0,0);}|300206|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

The rule: 

<pre><code>-webkit-backface-visibility: hidden;
</code></pre>

will not work for sprites or image backgrounds. 

<pre><code>body {-webkit-transform:translate3d(0,0,0);}
</code></pre>

screws up backgrounds that are tiled. 

I prefer to make a class called no-flick and do this: 

<pre><code>.no-flick{-webkit-transform:translate3d(0,0,0);}
</code></pre>

blocks|key|297993|text|将此css属性添加到正在闪烁的元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297994|-webkit-transform-style:+preserve-3d;|code-block|syntax|javascript|297995|(非常感谢Nathan+Hoad：http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)|offset|length|297996|entityMap|0|LINK|mutability|MUTABLE|url|http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit^0|0|0|H|1T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Add this css property to the element being flickered:

<pre><code>-webkit-transform-style: preserve-3d;
</code></pre>

(And a big thanks to Nathan Hoad: <a href="http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit" rel="noreferrer">http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit</a>)

blocks|key|3028753|text|有关更详细的解释，请查看此帖子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3028754|http://www.viget.com/inspire/webkit-transform-kill-the-flash/|offset|length|3028755|我绝对不会把它用在全身。关键是要确保你计划在未来转换的任何特定元素都是以3d渲染的，这样浏览器就不必切换到渲染模式和退出渲染模式。添加|3028756|-webkit-transform:+translateZ(0)+|code-block|syntax|javascript|3028757|(或者已经提到的任一选项)到动画元素将会实现这一点。|3028758|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1P|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

For a more detailed explanation, check out this post:

<a href="http://www.viget.com/inspire/webkit-transform-kill-the-flash/">http://www.viget.com/inspire/webkit-transform-kill-the-flash/</a>

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

<pre><code>-webkit-transform: translateZ(0) 
</code></pre>

(or either of the options already mentioned) to the animated element will accomplish this.

blocks|key|3243057|text|我不得不使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3243058|-webkit-perspective:+1000;
-webkit-backface-visibility:+hidden;++++|code-block|syntax|javascript|3243059|元素，否则在页面加载后第一次发生转换时，我仍然会看到flickr|3243060|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had to use:

<pre><code>-webkit-perspective: 1000;
-webkit-backface-visibility: hidden; 
</code></pre>

on the element, or I would still get a flickr the first time a transition occurred after page load

blocks|key|300286|text|我发现，将-webkit-backface-visibility:+hidden;应用于翻译元素，将-webkit-transform:+translate3d(0,0,0);应用于其所有子元素，然后闪烁就消失了|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|300287|entityMap^0|5|10|1E|12|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I found that applying the <code>-webkit-backface-visibility: hidden;</code> to the translating element and <code>-webkit-transform: translate3d(0,0,0);</code> to all its children, the flicker then disappears

blocks|key|300952|text|触发有问题的元素的硬件加速渲染。为了提高性能，我建议不要在*、body或html标记上这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300953|.problem{
++-webkit-transform:translate3d(0,0,0);
}|code-block|syntax|javascript|300954|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Trigger hardware accelerated rendering for the problematic element. I would advice to not do this on *, body or html tags for performance.

<pre><code>.problem{
 -webkit-transform:translate3d(0,0,0);
}
</code></pre>

blocks|key|3242925|text|以上两个答案都适用于有类似问题的我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3242926|但是，body+{-webkit-transform}方法可以有效地在3D中呈现页面上的所有元素。这不是最糟糕的事情，但它稍微改变了文本和其他CSS样式元素的呈现方式。|3242927|这可能是你想要的效果。如果你在你的页面上做了大量的转换，它可能会很有用。否则，-webkit-backface-visibility:隐藏在元素上您的转换是最不具侵入性的选项。|3242928|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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. 

It may be an effect you want. It may be useful if you're doing a lot of transform on your page. Otherwise, -webkit-backface-visibility:hidden on the element your transforming is the least invasive option.

<blockquote>
 Possible Duplicate: 
 <a href="https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker">iphone webkit css animations cause flicker</a> 
</blockquote>



For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing:

CSS:

<pre><code>#element {
 -webkit-transition: -webkit-transform 500ms;
}
</code></pre>

JavaScript:

<pre><code>$("#element").css("-webkit-transform", "translateX(" + value + "px)");
</code></pre>

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.

Prevent flicker on webkit-transition of webkit-transform

 可能重复：由于某些原因，就在我的webkit-transform属性动画发生之前，有一个轻微的闪烁。下面是我正在做的事情：CSS：#element {    -webkit-transition: -webkit-transform 500ms;}JavaScript：$("#element").css("-webkit-transform", "translateX(" + value + "

问防止webkit闪烁-webkit过渡-转换
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止webkit闪烁-webkit过渡-转换EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止webkit闪烁-webkit过渡-转换
EN