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

Tengo algo de CSS que al pasar el mouse, un efecto de transición de CSS moverá un div.

El problema, como puede ver en el ejemplo, es que la translatetransición tiene el horrible efecto secundario de hacer que la imagen en el div se mueva 1px hacia abajo / derecha (¿y posiblemente cambiar el tamaño muy ligeramente?) Para que parezca fuera de lugar y fuera de foco...

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

El problema solo parece suceder cuando la página tiene barras de desplazamiento. Entonces, el ejemplo con solo una instancia del div está bien, pero una vez que se agregan divs idénticos y la página requiere una barra de desplazamiento, el problema vuelve a ocurrir ...

Actualización 2020

• Si tiene problemas con las imágenes borrosas, asegúrese de verificar las respuestas a continuación también, especialmente la image-renderingpropiedad CSS.
• Para una mejor práctica de accesibilidad y SEO, puede reemplazar la imagen de fondo con una <img>etiqueta usando la propiedad CSS de ajuste de objeto .

Respuesta original

Prueba esto en tu CSS :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

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

• La cara posterior se dibuja por defecto para permitir voltear cosas con rotar y tal. No hay necesidad de eso si solo se mueve hacia la izquierda, derecha, arriba, abajo, escala o gira (en sentido antihorario).
• Traslade el eje Z para que siempre tenga un valor cero.
• Chrome ahora maneja backface-visibilityy transformsin el -webkit-prefijo. Actualmente no sé cómo esto afecta la representación de otros navegadores (FF, IE), así que use las versiones no prefijadas con precaución.

Debe aplicar la transformación 3D al elemento, para que obtenga 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);
}

Puede leer más sobre los criterios de creación de capas aquí: Renderizado acelerado en Chrome

Una explicación:

Ejemplos (pasar el cuadro verde):

• Problema: la transición puede causar un efecto de parpadeo en 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 rediseñe 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 el rediseño del contenido que puede tener un efecto de elementos "danzantes" o "parpadeantes" 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 delinea con un borde naranja.

Después de que el elemento obtiene su propia capa, el navegador solo necesita componer capas en la transición sin rediseño o incluso operaciones de pintura, por lo que el problema debe resolverse:

Tuve el mismo problema con el iframe embebido de youtube (se usaron traducciones para centrar el elemento iframe). Ninguna de las soluciones anteriores funcionó hasta que 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);
}

Recomiendo 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 conocerá el algoritmo para renderizar

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 reubicar un elemento una vez que se había cargado, sin embargo, ese elemento se volvió borroso.

Intenté todas las sugerencias anteriores, pero resultó que se debía a que usaba un valor decimal para uno de los valores de traducción. Los números enteros no causan el desenfoque, y cuanto más me alejaba del número entero, peor era el desenfoque.

es decir, 5.5pxdifumina el elemento más, 5.1pxlo menos.

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

He engañado el problema usando la transición por pasos, no sin problemas

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

No es una solución, es una trampa y no se puede aplicar 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/

Escalar al doble y reducir a la mitad zoomfuncionó para mí.

transform: scale(2);
zoom: 0.5;

He probado alrededor de 10 posibles soluciones. Los mezcló y todavía no funcionaban correctamente. Siempre había 1px batido al final.

Encuentro solución reduciendo 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.

Tratar filter: blur(0);

Funciono para mi

Para mí, ahora en 2018. Lo único que solucionó mi problema (una línea blanca intermitente parpadeante que atraviesa una imagen al pasar el mouse) 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;
}

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

Fui ayudado estableciendo el valor de la duración de la transición .3sigual a los pasos de sincronización.3s

Acabo de tener el mismo problema. Intente establecer la posición: relativa al elemento padre, eso funcionó para mí.