CSS3 transition/transform/translate3d causes severe flicker on first or last “frame” of the transition (on an iPad)

Question

All,

I\'m working on a web app specifically for the iPad, and I\'m using a CSS3 transition to animate a div (move it from left to right).

My class looks like

Answer 1

All,

I'm not positive that this is the answer (especially because the flicker itself seems a little unpredictable), but anecdotally, this seems to get rid of it...

Anyway, here's what I was doing:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

Often, the FIRST time this was executed, I'd see a flicker before the animation begins. Subsequent calls would animate smoothly.

What I inferred was that, if the 3d coordinates were not set before calling the animation, you'd see a flicker. The first call sets those coordinates, so subsequent calls would animate smoothly.

So - I tried setting the 3d coordinates of the div first (essentially, when I'm first building the screen - i.e., initialization), before any animations are ever triggered.

So, thereafter - when a 3d animation is called for, the div/element's starting 3d coordinates have already been established.

That seems to eliminate the flickering.

As I said - I'm not sure if this is a robust, reliable fix, but it certainly has eliminated the problem in my current projects.

Good luck.