Evite el parpadeo en webkit-transition de webkit-transform [duplicado]
Posible duplicado:
las animaciones CSS del webkit del iPhone provocan parpadeos
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 se produzca la transición, hay un parpadeo. ¿Alguna idea de por qué ocurre esto y cómo podría solucionar el problema?
¡Gracias!
Actualización: esto sólo ocurre en Safari. En Chrome no pasa, aunque la animación sí funciona.
La solución se menciona aquí: Las animaciones CSS del WebKit de iPhone provocan parpadeos .
Para su elemento, necesita configurar
-webkit-backface-visibility: hidden;
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 en mosaico.
Prefiero hacer una clase llamada no-flick y hacer esto:
.no-flick{-webkit-transform:translate3d(0,0,0);}
