jquery - ejemplos - La transición/transformación/traducción/conversión de CSS3 provoca un parpadeo grave en el primer o último "marco" de la transición(en un iPad)

jquery animate scrolltop

Question

Todos,

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 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 bien, EXCEPTO 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 muevo 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 estaba 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 consistente, he notado un parpadeo distinto al principio o al final de la transición.

En 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, el 2 superior tiene opacidad = 0.0. Al usar -webkit-keyframes, puedo obtener transiciones suaves y sedosas a medida que las fotos aparecen y desaparecen. Cuando termina la animación, la foto inferior termina con opacidad = 1.0, los dos primeros con opacidad = 0.0. (Ese debería ser su estado final).

Sin embargo, justo cuando termina la animación, la foto de abajo parpadea. Es como si el navegador fuera forzado a volver a dibujar / repintar la pantalla, y eso toma unas pocas fracciones de segundo.

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

Answer 1

Estaba lidiando con el mismo problema, y ​​encontré la solución aquí en SO: iPhone WebKit. Las animaciones de CSS causan parpadeo.

Es tan simple como agregar

-webkit-backface-visibility: hidden;

y posiblemente

-webkit-perspective: 1000;

A cada objeto animado. Funcionó para mí, espero que esto te ayude también

Answer 2

Solucionamos muchos problemas de parpadeo y de fuente al arreglar la ventana gráfica.

Anteriormente, el contenido salía de la página (un div deslizante) y el dispositivo parecía entrar en connipciones cuando la ventana gráfica no era fija, por lo que debíamos procesar los datos de la pantalla en combinación con el zoom-a-bility del 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 3

Todos,

No estoy seguro de que esta sea la respuesta (especialmente porque el parpadeo en sí parece un poco impredecible), pero anecdóticamente , esto parece deshacerse de él ...

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, la PRIMERA vez que se ejecutaba esto, veía un parpadeo antes de que comience la animación. Las llamadas subsiguientes se animarían sin problemas.

Lo que deduje fue que, si las coordenadas 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 llamadas subsiguientes se animarían sin problemas.

Entonces, intenté configurar las coordenadas 3D del div primero (esencialmente, cuando estoy construyendo la pantalla por primera vez, es decir, la inicialización), antes de que alguna animación se active.

Entonces, después de eso, cuando se requiere una animación 3d, las coordenadas 3d iniciales del elemento / div ya se han establecido.

Eso parece eliminar el parpadeo.

Como dije, no estoy seguro de si esta es una solución sólida y confiable, pero ciertamente ha eliminado el problema en mis proyectos actuales.

Buena suerte.

Answer 4

Tratar

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

pero, según tengo entendido, esto obliga al iPad a utilizar la aceleración de GPU

Tanto translate () como translate3d () crean un contexto de apilamiento y pueden usar capas - texturas buffers en términos de GPU. Así que no creo que realmente hagan ninguna diferencia en términos de aceleración.

Answer 5

Tuve este problema y probé todas las recomendaciones anteriores. Acabo de descubrir que el índice z de las caras puede causar el problema.

Tenía 3 paneles 1 medio (ambos planos) ambos lados en un ángulo como este / _ / - el del medio parpadeaba mientras que el índice z estaba arriba o igual que los lados. Moviéndolo al fondo arreglamos el parpadeo por completo.

Espero que ayude.

Answer 6

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

Me di cuenta de que cuando tenía un estado flotante en un div, la página parpadeaba, incluso si no tenía ningún css o js adjunto. No puedo ver tu HTML, pero esto podría ayudar