devongovett devongovett - 10 days ago 10
CSS Question

Prevent flicker on webkit-transition of webkit-transform


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.

Answer

The solution is mentioned here: http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker.

For your element, you need to set

-webkit-backface-visibility: hidden;