Todos

Estoy trabajando en una aplicación web específicamente para iPad, y estoy usando una transición CSS3 para animar un div (moverlo de izquierda a derecha).

Mi clase se ve así:

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

Cuando el usuario hace clic en un botón, hago esto:

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

Esto funciona muy bienEXCEPT elPRIMER vez que el usuario desencadena la transición; la primera vez, hay un parpadeo muy notable.

Me doy cuenta de que no necesito usar translate3d ya que solo estoy moviendo el div hacia la izquierda y hacia la derecha, pero, según tengo entendido, esto obliga al iPad a usar la aceleración de la GPU. (¿Es esto correcto?

¡Muchas gracias de antemano

[ACTUALIZAR

Yo era un poco ambiguo sobre el "parpadeo". En resumen, he estado experimentando con una amplia variedad de transiciones CSS3 (específicamente en el iPad) y de manera constante, he notado un parpadeo distintivo encomienz ofina de la transición.

n otras palabras, las transiciones en sí son MUY suaves. Sin embargo, dependiendo de la configuración precisa, hay un parpadeo notable justo antes de que comience o termine la transición.

Aquí hay otro ejemplo: tengo tres fotos (PNG) apiladas una encima de la otra.

El PNG inferior tiene opacidad = 1.0, los 2 superiores tienen opacidad = 0.0. Usando -webkit-keyframes, puedo obtener transiciones suaves como la seda a medida que las fotos se desvanecen. Cuando finaliza la animación, la foto inferior termina en opacidad = 1.0, las dos superiores en opacidad = 0.0. (Ese debería ser su estado final).

Sin embargo, justo cuando termina la animación, la foto inferior parpadea. Es como si el navegador se viera obligado a volver a dibujar / repintar la pantalla, y eso lleva unas pocas fracciones de segundo.

Es lo suficientemente malo como para estropear el efecto y hacer que las transiciones sean inutilizables. (En mi iMac escas, pero no del todo, imperceptible. En el iPad, es imperdible).