transicion - ¿El efecto de transición CSS hace que la imagen sea borrosa/mueve la imagen 1px, en Chrome?

transiciones css ejemplos

Question

Cuando el div está sobrevolado, un efecto de transición CSS mueve el div.

El problema, como puedes ver en el ejemplo, es que la transición de ''traducir'' tiene el efecto secundario horrible de hacer que la imagen en el movimiento div se mueva 1px hacia abajo / derecha (y posiblemente cambie el tamaño ligeramente) para que aparezca de lugar y fuera de foco ...

El error parece aplicarse todo el tiempo que se aplica el efecto de desplazamiento, y de un proceso de prueba y error puedo decir con seguridad que solo parece ocurrir cuando la transición de traducción mueve el div (la sombra de la caja y la opacidad también se aplican pero no hacen ninguna diferencia el error cuando se elimina).

2nd EDIT: ¡En realidad, problema NO resuelto!

Al crear un JSFiddle para ilustrar el problema, tropecé con una observación interesante. El problema solo ocurre cuando la página tiene barras de desplazamiento. Entonces el ejemplo con solo una instancia del div está bien, pero una vez más se agregan divs idénticos y la página por lo tanto requiere una barra de desplazamiento el problema vuelve a atacar ...

¡¿Algunas ideas?!

Answer 1

¿Has probado esto en CSS ?

.yourDivClass {
    /* ... */

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

Lo que hace es hacer que la división se comporte "más 2D".

• La cara posterior se dibuja como un valor predeterminado para permitir el volteo de cosas con rotar y tal. No hay necesidad de eso si solo mueves hacia la izquierda, derecha, arriba, abajo, escala o gira (en sentido antihorario).
• Traduzca el eje Z para que siempre tenga un valor cero.

Editar

Chrome ahora maneja backface-visibility y se transform sin el prefijo -webkit- . Actualmente no sé cómo afecta esto a otros navegadores de renderizado (FF, IE), así que use las versiones sin prefijo con precaución.

Answer 2

Acabo de encontrar otra razón por la cual un elemento se vuelve borroso cuando se transforma. Estaba usando transform: translate3d(-5.5px, -18px, 0); para volver a colocar un elemento una vez que se había cargado, sin embargo, ese elemento se volvió borroso.

Probé todas las sugerencias anteriores, pero resultó que se debía a que usé un valor decimal para uno de los valores de traducción. Los números enteros no causan el desenfoque, y cuanto más alejé del número total, peor se volvió el desenfoque.

es decir, 5.5px difumina el elemento más, 5.1px menos.

Solo pensé en tirar esto aquí en caso de que ayude a alguien.

Answer 3

Acabo de tener el mismo problema. Trate de establecer la posición: relativa al elemento principal, que funcionó para mí.

Answer 4

Busque un padre que tenga el position:relative; Y CAMBIO a: position: sticky

Answer 5

Debe aplicar la transformación 3D al elemento, de modo que obtendrá su propia capa compuesta. Por ejemplo:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

o

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

Más acerca de los criterios de creación de capas que puede leer aquí: Renderizado acelerado en Chrome

Una explicación:

Ejemplos (recuadro verde del cursor):

• Problema: la transición puede causar un efecto de parpadeo en los elementos hermanos (OSx Lion, Chrome 30)
• Solución: un elemento en su propia capa compuesta

Cuando usa cualquier transición en su elemento, hace que el navegador recalcule los estilos, luego vuelve a diseñar su contenido incluso si la propiedad de transición es visual (en mis ejemplos es una opacidad) y finalmente pinta un elemento:

El problema aquí es la reorganización del contenido que puede tener el efecto de "bailar" o "parpadear" elementos en la página mientras ocurre la transición. Si va a la configuración, marque la casilla de verificación "Mostrar capas compuestas" y luego aplique la transformación 3D a un elemento, verá que obtiene su propia capa que se indica con un borde naranja.

Después de que el elemento tenga su propia capa, el navegador solo necesita capas compuestas en transición sin re-diseño o incluso operaciones de pintura, por lo que el problema debe ser resuelto:

Answer 6

Escalar al doble y reducir a la mitad con el zoom funcionó para mí.

transform: scale(2);
zoom: 0.5;

Answer 7

He probado alrededor de 10 posibles soluciones. Los mezclé y todavía no funcionaban correctamente. Siempre hubo 1px shake al final.

Encuentro una solución al reducir el tiempo de transición en el filtro.

Esto no funcionó:

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

Solución:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

Prueba esto en violín:

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

Espero que esto ayude a alguien.

Answer 8

Hice trampa en el problema usando la transición por pasos, no suavemente

transition-timing-function: steps(10, end);

No es una solución, es un engaño y puede aplicarse no en todas partes.

No puedo explicarlo, pero funciona para mí. Ninguna de las otras respuestas me ayuda (OSX, Chrome 63, pantalla sin Retina).

https://jsfiddle.net/tuzae6a9/6/

Answer 9

Para mí, ahora en 2018. Lo único que solucionó mi problema (una línea blanca de parpadeo-glitchy corriendo a través de una imagen en hover) fue aplicar esto a mi elemento de enlace que contiene el elemento de imagen que tiene transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

Answer 10

Recomendé un nuevo atributo experimental CSS que probé en el último navegador y es bueno:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

Con esto el navegador sabrá el algoritmo para renderizar

Answer 11

Try filter: blur(0);

Funcionó para mí

Answer 12

Tuvo el mismo problema con incrustado el iframe de youtube (las traducciones se usaron para centrar el elemento iframe). Ninguna de las soluciones anteriores funcionó hasta que se intentó restablecer los filtros CSS y sucedió la magia.

Estructura:

<div class="translate">
     <iframe/>
</div>

Estilo [antes]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

Estilo [después]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

Answer 13

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

Me ayudó estableciendo el valor de la duración de transición .3s pasos de sincronización de transición iguales .3s