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

Try

.mover {
    position:absolute;
    -webkit-transition:-webkit-transform 0.4s ease-in-out;
} 

but, as I understand it, this forces the iPad to use GPU acceleration

Both translate() and translate3d() create stacking context and may use layers - texture buffers in terms of GPU. So I don't think that they really make any difference in terms of acceleration.