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

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 this:

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

When the user clicks a button, I do this:

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

This works great EXCEPT the FIRST time the user triggers the transition; the first time, there's a very noticeable flicker.

I realize I don't need to use translate3d since I'm only moving the div left and right, but, as I understand it, this forces the iPad to use GPU acceleration. (Is this correct?)

Many thanks in advance!

[UPDATE]

I was a little ambiguous about the "flicker". In short – I've been experimenting with a wide variety of CSS3 transitions (specifically on the iPad), and consistently – I've noticed a distinct flicker at the start or end of the transition.

In other words, the transitions themselves are VERY smooth. However, depending on the precise settings, there's a noticeable flicker just before the transition begins or ends.

Here's another example: I have three photos (PNGs) stacked on top of each other.

The bottom PNG has opacity=1.0, the top 2 have opacity=0.0. Using -webkit-keyframes, I'm able to get silky smooth transitions as the photos fade in and out. When the animation ends, the bottom photo ends at opacity=1.0, the top two at opacity=0.0. (That should be their final state).

However, just as the animation ends, the bottom photo flickers. It's as though the browser is forces to redraw/repaint the screen, and that takes a few fractions of a second.

It's bad enough to spoil the effect, and render then transitions unuseable. (On my iMac it is almost, but not quite, imperceptible. On the iPad, it's unmissable).