Transición CSS3 extraña (parpadeo)

Miguel tiene razón sobre backface-visiblity arreglando el molesto flash. Sin embargo, estoy usando transform scale y el SVG animado no será nítido después de escalar. Es agudo si no utiliza la propiedad backface-visiblity.

Así que o tienes una bonita animación con un gráfico borroso, o un gráfico de aspecto agradable con destellos de pantalla.

Sin embargo, puede agregar la siguiente línea al padre del objeto a realizar la transición, lo que corregirá el parpadeo de la pantalla y aún así renderiza su nitidez gráfica después de escalar.

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

Creo que actualmente es un problema sin solución. Yo también me he encontrado con esto antes de jugar y no pude hacerlo funcionar. Usar un color sólido parece estar bien, o fingirlo con una imagen de fondo.

Pregunta similar aquí: Soporte Webkit para transiciones de gradiente

Más información: http://screenflicker.com/mike/code/transition-gradient /

El parpadeo que está notando es en realidad el color de fondo del botón que se cambia a transparente (por lo tanto, el botón "parpadea" o se vuelve blanco en su violín porque el color de fondo del cuerpo es blanco).

Si superpones el botón encima de otro elemento con el mismo tamaño/altura/color de fondo (incluidos los degradados), el "parpadeo" no se notará.

Compruebe aquí un ejemplo usando su violín: http://jsfiddle.net/hrDff/12 /

Todavía definitivamente un bug tho...

Este enlace lo arregló para mí. Solo tienes que añadir una línea al css del elemento que está parpadeando:

Http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

Creo que el problema es que está cambiando de un fondo de gradiente lineal a un color de fondo sólido para los navegadores web Google Chrome y Microsoft Edge. Para solucionar este problema, debe agregar un fondo de gradiente lineal similar a sus pseudo clases, en este caso :hover y :active. Lo probé yo mismo en tu jsfiddle y no tuve parpadeo en el renderizado mientras flotaba sobre el botón.

        background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);

Cambié el color superior del gradiente lineal para dar un cambio notable en el efecto hover.

 button:hover {
background: -webkit-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
   }

No hay más problemas con el parpadeo cuando cierro el botón en Chrome o Microsoft Edge. Espero que esto ayude.

Con un problema similar, las sugerencias de Jan ayudaron a mejorar para todas las imágenes de fondo menos una. Me deshice del parpadeo de la última al notar dos reglas de posicionamiento en conflicto. Tenía para un position:static una regla margin-top:-3em (menos) y la otra margin-top:5em (más). Por lo tanto, le sugiero que revise cuidadosamente la consistencia del posicionamiento cuando experimente un problema de este tipo.

En su caso Michelle, he estado probando con un retraso más largo 1s a 3s, lo que me ayudó a entender lo que es más claro etapa, un flash con un retraso muy corto. Su degradado comienza sin fondo de hecho y lo que ve es el fondo de la página. Obtuve esta información cambiando el fondo del cuerpo de mi página de prueba de marfil a negro.

Cuando probé su gradiente en un fondo negro obtuve un escenario/flash negro (más fácil de ver en 3s). Tal vez debería ser prudente probar el orden de sus reglas, y también tratar de entender por qué el gradiente comienza desde el fondo del cuerpo o padre y no de tu pasado.

Una solución podría ser establecer el botón en un div con el fondo rojo del botón en el tamaño y la forma exactos de su botón.

Resolví el parpadeo así:

Html como sigue:

<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>

Css como sigue:

.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}