html - ease - Weird CSS3 Transition(parpadeo)

transition ease css

Question

Cuando me acerco a mi botón, primero aparece un destello blanco al iniciar la transición. ¿Por qué parpadea cuando aplico una transición css3 a mi botón? Mi navegador es Google Chrome

Mira aquí

<button>Log In</button>​

CSS:

button {
    background: #ff3019;
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    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%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ff3019'', endColorstr=''#cf0404'',GradientType=0 );
    border:1px solid #890000;
    display:block;
    margin:0 auto;
    width:200px;
    padding:5px 0;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    text-shadow:0 1px 1px #000+50;
    box-shadow:0 2px 3px #000+150;
    -webkit-transition:background linear .5s;
}
button:hover {
    background:#ff3019;
}
button:active {
    background:#cf0404;
}

1.

Answer 1

Con un problema similar, las sugerencias de Jan ayudaron a mejorar para todas las imágenes de fondo, menos una. Me deshice del parpadeo del último al notar dos reglas de posicionamiento en conflicto. Tenía una position:static una regla de 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 tal problema.

En tu caso, Michelle, he estado probando con un retraso mayor de 1s a 3s, lo que me ayudó a entender cuál es la etapa más clara, un flash con un retraso muy corto. Su gradiente comienza sin fondo 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é tu gradiente sobre un fondo negro obtuve un escenario / flash negro (más fácil de ver en 3s). Quizás 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 del padre y no desde su fondo.

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

Answer 2

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

Pregunta similar aquí: soporte de Webkit para transiciones de gradiente

Más detalles: http://screenflicker.com/mike/code/transition-gradient/

Answer 3

Creo que el problema es que está pasando de un fondo degradado lineal a un color de fondo sólido para los navegadores web Google Chrome y Microsoft Edge. Para solucionar este problema, debería agregar un fondo de degradado lineal similar a sus pseudoclases, en este caso, el: hover y el: active. Lo intenté yo mismo en su jsfiddle y no parpadeé en el renderizado mientras estaba 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 degradado lineal para dar un cambio notable en el efecto de desplazamiento.

 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 flasheo cuando sobre el botón en Chrome o Microsoft Edge. Espero que esto ayude.

Answer 4

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 pone blanco en el Fiddle porque el color de fondo del cuerpo es blanco).

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

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

Todavía definitivamente es un error ...

Answer 5

Este enlace me lo arregló Solo tiene que agregar una línea al css del elemento que parpadea:

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

Answer 6

Me deshice del parpadeo. Agregar « -webkit-backface-visibility: hidden; »A los elementos que estás haciendo la transición. Voilà!

Answer 7

Miguel tiene razón sobre la visibilidad de la cara posterior del flash molesto. Sin embargo, estoy usando la escala de transformación y el SVG animado no será nítido después de escalar. Es nítido si no usa la propiedad backface-visiblity.

Entonces, o tienes una bonita animación con un gráfico borroso, o un bonito gráfico con destellos en la pantalla.

Sin embargo, puede agregar la siguiente línea al elemento primario del objeto que se va a transitar, que fijará el parpadeo de la pantalla y aún así hará que su gráfico sea nítido después de escalar.

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

Answer 8

Solucioné el parpadeo de esta manera:

Html de la siguiente manera:

<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 de la siguiente manera:

.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);
}