Prevent flicker on webkit-transition of webkit-transform

Question

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

User · Accepted Answer

The solution is mentioned here  iPhone WebKit CSS animations cause flicker   For your element  you need to set   -webkit-backface-visibility  hidden

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[css] Prevent flicker on webkit-transition of webkit-transform

Examples related to css

Examples related to css-transitions

Examples related to css-transforms