CSS3 transición/transformar/translate3d provoca el parpadeo severa en la primera o la última "marco" de la transición (en un iPad)

Question

Todo,

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

Mi clase es el siguiente:

.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 bien SALVO la PRIMERA vez que el usuario activa 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!

[ACTUALIZACIÓN]

que estaba un poco ambigua sobre el "parpadeo". En resumen: he estado experimentando con una amplia variedad de transiciones CSS3 (específicamente en el iPad), y de forma consistente, he notado un parpadeo distinto en el start o end de la transición.

En otras palabras, las transiciones mismas son MUY fluidas. Sin embargo, dependiendo de la configuración precisa, hay un parpadeo notable justo antes de que comience o finalice 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 termina la animación, la foto inferior termina en opacidad = 1.0, los dos primeros en opacidad = 0.0. (Ese debería ser su estado final).

Sin embargo, cuando termina la animación, la foto inferior parpadea. Es como si el navegador obligara a volver a dibujar/volver a pintar la pantalla, y eso lleva algunas fracciones de segundo.

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

Answer 1

Todo,

No estoy positivo que esta es la respuesta (sobre todo porque el parpadeo en sí parece un poco impredecible), pero anecdóticamente , esto parece deshacerse de que ...

De todos modos, esto es lo que estaba haciendo:

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

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

A menudo, el FIRST vez que esto se ejecutó, vería un parpadeo antes de que comience la animación. Las llamadas posteriores se animarían sin problemas.

Lo deduje fue que, si las coordenadas en 3D no se establecieron antes de llamar a la animación, verías un parpadeo. La primera llamada establece esas coordenadas, por lo que las siguientes llamadas se animarían sin problemas.

Entonces, intenté establecer las coordenadas 3d del div primero (esencialmente, cuando estoy construyendo la pantalla por primera vez, es decir, la inicialización), antes de que se activen las animaciones.

Así, a partir de entonces - cuando una animación en 3D que se pide, ya se han establecido a partir coordenadas 3D del div/del elemento.

Eso parece eliminar el parpadeo.

Como dije - No estoy seguro de si esto es una solución robusta, fiable, pero ciertamente ha eliminado el problema en mis proyectos actuales.

Buena suerte.

Answer 2

Trate

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

pero, como yo lo entiendo, esto obliga al iPad para utilizar la aceleración de GPU

Tanto translate() y translate3d() crear apilamiento contexto y puede utilizar las capas - texturas de reserva en términos de GPU. Entonces no creo que realmente hagan una diferencia en términos de aceleración.

Answer 3

que estaba tratando con el mismo tema, y ​​he encontrado la solución aquí en SO: iPhone WebKit CSS animations cause flicker

Es tan simple como añadir

-webkit-backface-visibility: hidden; 

y posiblemente

-webkit-perspective: 1000; 

Para cada animada objeto. Se trabajó para mí, espero que esta ayuda para usted también

Answer 4

hemos resuelto muchos problemas de parpadeo y la fuente mediante la fijación de la ventana gráfica.

Anteriormente teníamos contenido que salía de la página (un div deslizante) y el dispositivo parecía entrar en connotaciones cuando la ventana gráfica no estaba fija, teniendo que procesar los datos fuera de la pantalla en combinación con el zoom-a-bility de el contenido mostrado.

Esta etiqueta en la cabeza resolvió nuestros problemas.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

Answer 5

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } 

me di cuenta cuando tuve un estado estacionario en un div de la página sería parpadear, aunque no tenía ninguna css o js que se le atribuye. No puedo ver su html, pero esto podría ayudar

Answer 6

Tuve este problema e intenté con todas las recomendaciones anteriores. Acabo de descubrir que el índice Z de las caras puede causar el problema.

Tenía 3 paneles 1 medio (plano) ambos lados en ángulo como este \ _/- el del medio parpadeaba mientras el índice Z estaba arriba o lo mismo que los lados. Moverlo al fondo fijo el parpadeo por completo.

Espero que ayude.