css - style - Evite el parpadeo en webkit-transition de webkit-transform

transition transform

Question

Posible duplicado:
las animaciones iphone webkit css causan parpadeo

Por alguna razón, justo antes de que ocurra mi animación de la propiedad webkit-transform, hay un ligero parpadeo. Esto es lo que estoy haciendo:

CSS:

#element {
-webkit-transition: -webkit-transform 500ms;
}

JavaScript:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

Justo antes de que tenga lugar la transición, hay un parpadeo. ¿Alguna idea de por qué es esto y cómo podría solucionar el problema?

¡Gracias!

Actualización: esto solo ocurre en Safari. No sucede en Chrome, aunque la animación sí funciona.

Answer 1

Agregue esta propiedad css al elemento que está parpadeando:

-webkit-transform-style: preserve-3d;

(Y muchas gracias a Nathan Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit )

Answer 2

Desencadenar el procesamiento acelerado por hardware para el elemento problemático. Aconsejo no hacer esto en las etiquetas *, body o html para el rendimiento.

.problem{
-webkit-transform:translate3d(0,0,0);
}

Answer 3

Encontré que aplicando -webkit-backface-visibility: hidden; al elemento de traducción y -webkit-transform: translate3d(0,0,0); para todos sus hijos, el parpadeo luego desaparece

Answer 4

La regla:

-webkit-backface-visibility: hidden;

no funcionará para sprites o fondos de imágenes.

body {-webkit-transform:translate3d(0,0,0);}

arruina los fondos que están alicatados.

Prefiero hacer una clase llamada no-flick y hacer esto:

.no-flick{-webkit-transform:translate3d(0,0,0);}

Answer 5

La solución se menciona aquí: las animaciones de iPhone WebKit CSS causan parpadeo .

Para su elemento, necesita establecer

-webkit-backface-visibility: hidden;

Answer 6

Las dos respuestas anteriores funcionan para mí con un problema similar.

Sin embargo, el enfoque body {-webkit-transform} hace que todos los elementos en la página se representen de manera efectiva en 3D. Esto no es lo peor, pero cambia ligeramente la representación de texto y otros elementos de estilo CSS.

Puede ser un efecto que desee. Puede ser útil si te estás transformando mucho en tu página. De lo contrario, -webkit-backface-visibility: oculto en el elemento su transformación es la opción menos invasiva.

Answer 7

Para una explicación más detallada, revisa esta publicación:

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

Definitivamente evitaría aplicarlo a todo el cuerpo. La clave es asegurarse de que cualquier elemento específico que planee transformar en el futuro comience en 3D, por lo que los navegadores no tienen que cambiar entre modos de renderizado. Añadiendo

-webkit-transform: translateZ(0)

(o cualquiera de las opciones ya mencionadas) al elemento animado lo logrará.

Answer 8

Tuve que usar:

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

en el elemento, o aún obtendría un flickr la primera vez que ocurría una transición después de la carga de la página