evitar el parpadeo en webkit-transición de webkit-transform

147

Duplicar posible:
iphone webkit css animations cause flicker evitar el parpadeo en webkit-transición de webkit-transform

Por alguna razón, justo antes de mi animación de la webkit-transform se produce la propiedad, hay una ligero parpadeo. Aquí es lo que estoy haciendo:

CSS:

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

JavaScript:

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

Justo antes de la transición tiene lugar, 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.

Fuente

2010-08-11 devongovett

Me di cuenta del problema en iOS 4.2 beta 2. – rpitting

sucede para mí en FF versión 17.0 ahora ... con objetos escalados que están escalados más allá del tamaño de la ventana – vsync

Comportamiento siempre en Chrome en algunos casos ... –

257

La solución se menciona aquí: iPhone WebKit CSS animations cause flicker.

Para su elemento, debe configurar

-webkit-backface-visibility: hidden;

Fuente

2010-10-13 08:21:46 rpitting

+11

Mis transiciones afectaban a otros elementos en el sitio y terminé por tener que agregue la regla a todos los elementos en el sitio. – mlunoe

funcionó para mí también. Tenía un menú oculto que empujaba el contenido hacia abajo con una animación CSS cuando se mostraba. La aplicación de la regla anterior a mi div principal de contenido que siguió al menú oculto solucionó mi problema sin afectar drásticamente el rendimiento. NB: Cuando lo apliqué a mi regla global de HTML, la animación de CSS empeoró un poco, ¡cuidado! – Primus202

El uso de un selector de comodines para esta propiedad en realidad causó un parpadeo adicional de otros elementos. Mi solución de trabajo fue aplicar selectivamente la propiedad a los elementos que se estaban traduciendo. – hlfcoding

Tanto de las dos respuestas anteriores funciona 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 está haciendo un lote de transformación en su página. De lo contrario, -webkit-backface-visibility: oculto en el elemento su transformación es la opción menos invasiva.

Fuente

2011-07-07 14:08:00

La regla:

-webkit-backface-visibility: hidden;

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

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

tornillos fondos que están alicatados.

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

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

Fuente

2011-10-11 23:55:05 ablemike

Tiene razón, la corrección de visibilidad de la cara posterior no funciona en fondos de imágenes. Gracias. – ppcano

Tenga en cuenta que, al usar translate3d (0,0,0) _anywhere_, Chrome ahora rompe cualquier posición de fondo: cobertura que puede o no tener. – Norris

Awww, yeeeaaah. Como la mantequilla. – gfullam

Para una explicación más detallada, echa un vistazo a este post:

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

Sin duda, evitar la aplicación de 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.Agregar

-webkit-transform: translateZ(0)

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

Fuente

2012-01-20 21:32:36

Esto funcionó después de poner un valor real en: transform: translateZ (0.1px) – bob

tuve que usar:

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

en el elemento, o yo aún así obtener una flickr primera vez una transición ocurrió después de carga de la página

Fuente

2012-03-09 18:50:32

hardware de renderizado acelerado de activación 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); 
}

Fuente

2012-11-12 14:38:48

Añadir esta propiedad CSS para el elemento que se está parpadeaba:

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

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

Fuente

2012-12-21 17:27:27

Necesitaba usar esto para que las cosas dejaran de parpadear. – matthewpavkov

¡Ahorro de vida! Gracias. visibilidad de la cara posterior: oculta; no funcionó para mí Esto hizo :-) –

He encontrado que la aplicación de la -webkit-backface-visibility: hidden; al elemento de manipulación y -webkit-transform: translate3d(0,0,0); a todos sus hijos, el parpadeo luego desaparece

Fuente

2013-01-02 22:14:12

evitar el parpadeo en webkit-transición de webkit-transform

Respuesta

Cuestiones relacionadas