问题
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:
CSS:
#element {
-webkit-transition: -webkit-transform 500ms;
}
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.
回答1:
The solution is mentioned here: iPhone WebKit CSS animations cause flicker.
For your element, you need to set
-webkit-backface-visibility: hidden;
回答2:
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{-webkit-transform:translate3d(0,0,0);}
回答3:
Add this css property to the element being flickered:
-webkit-transform-style: preserve-3d;
(And a big thanks to Nathan Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)
回答4:
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
回答5:
For a more detailed explanation, check out this post:
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
-webkit-transform: translateZ(0)
(or either of the options already mentioned) to the animated element will accomplish this.
回答6:
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
回答7:
Trigger hardware accelerated rendering for the problematic element. I would advice to not do this on *, body or html tags for performance.
.problem{
-webkit-transform:translate3d(0,0,0);
}
回答8:
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.
来源：https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform