playsinline iphone css animation webkit flicker

iphone - playsinline - autoplay video ios



Las animaciones de iPhone WebKit CSS causan parpadeo (17)

Aquí hay una nueva solución. Estaba configurando la imagen de fondo con jQuery, y ninguno de los trucos de representación 3D funcionó. Así que traté de usar clases para definir las propiedades en su lugar. Voilà! Suave como la mantequilla.

Esto causa parpadeo:

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

En lugar de hacer:

$(''#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"); }

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

Después de hacer clic en "jugar ahora", accederás a un juego. Las pistolas se desplazarán hacia adentro. Puede desplazar el monedero y los accesorios hacia arriba y hacia abajo. Puedes ver que cuando sueltas, encajan en su lugar. Justo cuando sucede 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 animar o no y la transformación es la única forma en que muevo las cosas.

Sin embargo, el mayor problema es cuando haces clic en "Coincidir elementos", luego haces clic en "Reproducir de nuevo". Verás como las pistolas se animan, el fondo completo de los accesorios / carteras se vuelve blanco. ¿Alguien puede por favor irradiarme con alguna idea de por qué está sucediendo esto?

Aunque tenía -webkit-transform-style: preserve-3d; y -webkit-backface-visibility: hidden el parpadeo aún estaba sucediendo.

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

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

He experimentado parpadeos al realizar una transición de diapositivas cuando uso un navegador web predeterminado de Android.

He usado la siguiente transición css:

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

Ninguna de las soluciones 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 resolvió:

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

Intenté 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 caja y sombra que estaba causando muchos repintados durante la animación. Seguí esto y modifiqué para mis necesidades:

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

La respuesta real para mi caso está aquí. Alguien estaba cerca de: -webkit-backface-visibility: hidden; Pero la verdadera respuesta es -webkit-backface-visibility: hidden; debe agregarse al div principal .

Pasé mucho tiempo tratando de resolver este problema para Ember Animated Outlets, Phonegap y la configuración de iOS .

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 punto de sus vistas haya un elemento que no tenga un fondo.

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

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

Prueba esto, y con suerte te ayudará:

#game { -webkit-backface-visibility: hidden; }

Si alguien encuentra que la visibilidad de la cara posterior no funciona, puede mirar las propiedades que ya están en su elemento animado. Para nosotros, encontramos que overflow-y: scroll en un elemento posicionado absolute o fixed estaba causando parpadeos importantes en iOS.

Simplemente eliminando overflow-y: scroll arregló.

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 terminaba la animación, todo el menú parpadeaba / parpadeaba.

Resultó que esto fue causado por una función real de iOS, el "toque resaltado" , que por algún motivo se activó después de que finalizó la animación CSS (es decir, después del toque real), y resaltó todo el menú en lugar de solo el elemento eso fue aprovechado "Solucioné" el problema deshabilitando por completo el resaltado, como se describe here :

-webkit-tap-highlight-color: rgba(0,0,0,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>

Según lo que he leído , el parpadeo es causado por el cambio de navegador entre el hardware y la representación del software. Y creo que los fabricantes de navegadores están al tanto de los antiguos "translate3d (0,0,0)" para forzar el procesamiento del hardware, por lo que ahora pueden estar ignorando estos valores falsos.

=> Usar un valor real puede hacer que las cosas "se peguen".

De todos modos, funcionó para mí.

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

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

La respuesta de Michael -webkit-backface-visibility: hidden; funcionó cuando llegamos a este problema Teníamos translateZ(0px) en nuestra etiqueta <body> para evitar un IOS 3.1.3 y un error de límite IFRAME anterior y causaba que los anims parpadearan. Agregar -webkit-backface-visibility: hidden; ¡para cada elemento que animamos arreglado el parpadeo! Salvavidas.

-webkit-backface-visiblity y eso ayudó en gran -webkit-backface-visiblity , 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;

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

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

Noté que cuando tenía un estado de desplazamiento sobre un div, la página parpadeaba, incluso si no tenía ningún css o js adjunto. tal vez esto ayuda a alguien más.