Las animaciones CSS de WebKit de iPhone causan parpadeo

83

Este es el sitio de iphone: http://www.thevisionairegroup.com/projects/accessorizer/site/

Después de hacer clic en "jugar ahora", accederá a un juego. Las armas se desplazarán hacia adentro. Puede desplazar el bolso y los accesorios hacia arriba y hacia abajo. Puedes ver que cuando los sueltas, encajan en su lugar. Justo cuando ocurre ese chasquido, se produce un parpadeo. Las únicas animaciones de webkit que estoy usando son:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

Elijo la primera o la segunda transición en función de si quiero o no que se anime, y la transformación es la única forma en que muevo las cosas.

Sin embargo, el mayor problema es cuando haces clic en "Hacer coincidir elementos" y luego en "Reproducir de nuevo". Verá que las armas se animan, todo el fondo de los accesorios / carteras se vuelve blanco. ¿Alguien puede por favor irradiarme una idea de por qué está sucediendo esto?

iphone css animation webkit flicker Jake Chapa
fuente

Respuestas:

126

Agregué -webkit-backface-visiblityy eso ayudó en gran medida, pero todavía tenía un parpadeo inicial después de volver a cargar la página. Cuando agregué -webkit-perspective: 1000, no hubo parpadeo alguno.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Wes Baker
fuente
21
¿Cuál es la magia detrás de 1000? ¿Puede funcionar algún otro valor (> 0)?
cyrus
NOTA: esto hace que la animación no responda a los eventos del mouse en Windows Chrome v19: en la práctica, al agregar esto, no hay parpadeo, pero la animación no siempre comienza (al pasar el mouse o lo que sea)
skyline26
1
NOTA: agregar visibilidad de la cara posterior cambiará la representación de los colores. Aquí hay un ejemplo con la visibilidad del reverso
activada
3
Tuve este problema con el parpadeo del texto al intentar realizar la transición de elementos de enlace. Cambiar la visibilidad del reverso alteró el suavizado, haciendo que la fuente sea realmente delgada. Se corrigió usando -webkit-font-smoothing: subpixel-antialiased;
Dan
1
@cYrus Supongo que nunca lo sabremos
Denny
39

Pruebe esto y, con suerte, le ayudará:

#game {
  -webkit-backface-visibility: hidden;
}
donohoe
fuente
2
Esto funciona muy bien en Safari predeterminado pero falla en el modo independiente. ¿Tienes alguna idea?
cyrus
18 
body {-webkit-transform:translate3d(0,0,0);}
Brian D'Astous
fuente
Esto lo hizo por mí ... sin embargo, tuve que aplicarlo en un #wrapperelemento ya que aplicarlo en el cuerpo arruinaría el diseño.
adamJLev
Si alguien quiere ver la cara posterior "-webkit-backface-visibilidad: oculta;" no funciona, pero este es perfecto. ¡Gracias!
Nachtgold
Perfecto. -webkit-backface-visibility: hidden;provocó que las transformaciones de escala fueran borrosas. body {-webkit-transform:translate3d(0,0,0);}funcionó un placer.
Liam
Lo estoy intentando pero no me funciona. Aquí hay un fragmento de código: codeply.com/go/g7Zp98paz5
Fran_gg7
1
Esto funcionó para mí. En mi caso, scale(1)provocó el parpadeo. muchas gracias
jansesun
12

La respuesta real para mi caso está aquí. Alguien estaba cerca con: -webkit-backface-visibilidad: oculto; Pero la respuesta real es -webkit-backface-visible: oculto; debe agregarse al div principal .

Johan De Silva
fuente
De hecho, necesitaba agregar -webkit-backface-visibility: hidden;al div padre, el div animado Y los hijos del div animado. Una vez que hice eso, funcionó a la perfección.
Mattstuehler
2
Creo que eso también solucionó mi parpadeo al agregarlo al padre. ¿Qué es lo que hace?
Chovy
Sin embargo, agregarlo al padre deshace la posición "fija" en los elementos secundarios :(
James
11

También tuve un problema con una transición CSS "parpadeante". La animación en cuestión era un menú que se deslizaba desde fuera de la pantalla, y justo cuando finalizaba la animación, todo el menú parpadeaba / parpadeaba.

Al final resultó que, esto fue causado por una característica real de iOS, el "toque resaltado" , que por alguna razón se activó después de que terminó la animación CSS (es decir, mucho después del toque real), y resaltó todo el menú en lugar de solo el elemento que fue intervenido. "Solucioné" el problema al deshabilitar por completo el toque-resaltado, como se describe aquí :

-webkit-tap-highlight-color: rgba(0,0,0,0);
fresskoma
fuente
5

La respuesta de Michael -webkit-backface-visibility: hidden; funcionó cuando nos enfrentamos a este problema. Teníamos translateZ(0px)nuestra <body>etiqueta para evitar un IFRAMEerror de límite de iOS 3.1.3 y anterior y causó que los anims parpadearan. ¡Añadiendo -webkit-backface-visibility: hidden;a cada elemento que animamos arreglamos el parpadeo! Salvavidas.

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

Me di cuenta de que cuando tenía un estado de desplazamiento en un div, la página parpadeaba, incluso si no tenía ningún css o js adjunto. tal vez esto ayude a alguien más.

Jesse
fuente
para mí ese hizo el truco. los otros solo fueron relevantes cuando las transiciones estaban en su lugar.
Nadav
3

Si alguien encuentra que la visibilidad del reverso no funciona, puede mirar las propiedades que ya están en su elemento animado. Para nosotros, descubrimos que overflow-y: scrollen un elemento absoluteo fixedposicionado estaba causando un gran parpadeo en iOS.

Simplemente quitando lo overflow-y: scrollfijo.

KendallB
fuente
Quitar overflow-y: scrollayudó a mi caso. Muchas gracias!
YemSalat
Probablemente también sea mi caso. pero no puedo eliminar el desbordamiento ni la posición absoluta de este elemento. ¿alguna idea?
Kobi Cohen
1

A pesar de que tenía -webkit-transform-style: preserve-3d;y-webkit-backface-visibility: hidden el parpadeo todavía estaba sucediendo.

En mi caso la causa fue el z-index. Aumentarlo en el elemento activo ayudó.

Morfeo
fuente
0

Aquí tienes una nueva solución. Estaba configurando la imagen de fondo con jQuery, y ninguno de los trucos de renderizado 3D funcionó. Así que intenté usar clases para definir las propiedades. ¡Voilà! Suave como la mantequilla.

Esto causa parpadeo:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

En su lugar, haz:

$('#banner').attr('class', '.slide-1');

con clases definidas:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }
mattwad
fuente
0

Había pasado mucho tiempo tratando de resolver este problema para Ember Animated Outlets, Phonegap e iOS configuración de .

Aunque simple, tuve que agregar un fondo a cada elemento principal de nivel superior que se incluyó en las animaciones CSS. En otras palabras, asegúrese de que en ningún momento de sus vistas haya un elemento que no tenga fondo.

Mi configuración fue la siguiente para cada plantilla y los tres elementos tenían un color de fondo asignado:

<header></header> <body class="content"></body> <footer></footer>

Kenorvick
fuente
0

En lugar de aplicar la transición a "todos", solo especifique la que realmente necesita. Eliminó el parpadeo de mi caso.

Sylvestre Lucia
fuente
0

Probé todo lo anterior y todavía tenía problemas importantes de parpadeo en Firefox y Chrome. Lo arreglé, o al menos lo reduje en gran medida a un problema aceptable al eliminar la transformación de sombra de cuadro que estaba causando muchos repintados durante la animación. Seguí esto y lo modifiqué según mis necesidades:

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

d1ch0t0my
fuente
0

para mí, el problema del parpadeo en safari se resolvió quitando will-change: transform; el elemento animado.

también podría resolver este problema agregando overflow: hidden;al padre, pero con esto, todos los elementos se transform: translateZ()volvieron ineficaces

Mohsen.Khakbiz
fuente
0

Tuve que usar un valor real (en lugar de 0):

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

Ejemplo:

<div class="foo no-flick"></div>

Por lo que he leído , el parpadeo se debe a que el navegador cambia entre la representación de hardware y software. Y creo que los fabricantes de navegadores son conscientes de que sí "translate3d (0,0,0)" para forzar el procesamiento de hardware, por lo que ahora pueden estar ignorando estos valores falsos.

=> El uso de un valor real puede hacer que las cosas se "peguen".

De todos modos, funcionó para mí.

Beto
fuente
0

Experimenté parpadeo al realizar una transición de diapositiva al usar un navegador web de Android predeterminado.

He usado el siguiente CSS de transición:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

Ninguna de las soluciones alternativas mencionadas en este hilo ha ayudado a resolver el problema. Finalmente encontré la solución. La fuente del parpadeo es la palabra clave all, que significa realizar todas las transiciones posibles. Lo cambié para realizar solo la transformación y el problema se ha resuelto:

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
Jusid
fuente
0

Lo que me solucionó fue retrasar la asignación de la regla CSS de transformación-traducción. Algo como esto:

HTML:

<div class="animate-this loading"></div>

CSS:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

… Porque -webkit-backface-visibility: hidden;no hizo nada por mí.

WoodrowShigeru
fuente
0

Así que encontré una solución para este problema donde ningún otro funcionaba correctamente.

CSS:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML:

<div class="ios-animation-fixer"></div>

Luego, establezca que el z-indexelemento animado sea> 1. Esto de alguna manera engaña a los dispositivos iOS para que representen la animación de manera diferente y evita el parpadeo en mi escenario. El ajuste de los valores del índice z puede ser útil si esta solución no funciona desde el principio.

Colin
fuente
0

ACTUALIZACIÓN 2019

Puede activar el parpadeo simplemente agregando estas reglas al elemento en el que se usa la transición.

-webkit-transform: translate3d(0, 0, 0);

Trabajó para mí en Safarai

Estilo libre09
fuente