la imagen se mueve al pasar el mouse - problema de opacidad de cromo

Parece que hay un problema con mi página aquí: http://www.lonewulf.eu

Al pasar el cursor sobre las miniaturas, la imagen se mueve un poco hacia la derecha y solo ocurre en Chrome.

Mi css:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Otra solución sería utilizar

-webkit-backface-visibility: hidden;

en el elemento flotante que tiene la opacidad. La visibilidad del reverso se relaciona con transform, por lo que @Beskow tiene algo que ver con eso. Dado que es un problema específico de webkit, solo necesita especificar la visibilidad del reverso para webkit. Hay otros prefijos de proveedores .

Consulte http://css-tricks.com/almanac/properties/b/backface-visibility/ para obtener más información.

Por alguna razón, Chrome interpreta la posición de los elementos sin una opacidad de 1 de una manera diferente. Si aplica el atributo CSS position:relativea sus elementos a.img, no habrá más movimiento de izquierda a derecha ya que su opacidad varía.

Tuve el mismo problema, lo solucioné con css transform rotate. Me gusta esto:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Funciona bien en los principales navegadores.

Otra solución que solucionó este problema para mí fue agregar la regla:

will-change: opacity;

En mi caso particular, esto evitó un problema similar de salto de píxeles que se translateZ(0)introdujo en Internet Explorer, a pesar de arreglar cosas en Chrome.

La mayor parte de las otras soluciones sugeridas aquí que implican transformaciones (por ejemplo. translateZ(0), rotate(0), translate3d(0px,0px,0px), Etc) funcionan entrega pintura del elemento más a la GPU, lo que permite la prestación más eficiente. will-changeproporciona una pista al navegador que presumiblemente tiene un efecto similar (permitiendo que el navegador represente la transición de manera más eficiente), pero se siente menos hack (ya que está abordando explícitamente el problema en lugar de simplemente presionar al navegador para que use la GPU).

Dicho esto, vale la pena tener en cuenta que la compatibilidad con el navegador no es tan buena para will-change(aunque si el problema es solo con Chrome, ¡esto podría ser algo bueno!), Y en algunas situaciones puede presentar problemas propios , pero aún así , es otra posible solución a este problema.

Yo era necesario aplicar tanto backface-visibilityy transformnormas para evitar este fallo. Me gusta esto:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Tuve un problema similar con los filtros (sin opacidad) al pasar el mouse. Se corrigió agregando una regla a la clase base con:

filter: brightness(1.01);

Backface-Visibilidad (o -webkit-Backface-Visibilidad) solo solucionó el problema en Chrome para mí. Para solucionarlo tanto en Firefox como en Chrome, utilicé la siguiente combinación de respuestas anteriores.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Encontré un problema similar en Safari 8.0.2, donde las imágenes temblaban a medida que cambiaba su opacidad. Ninguna de las correcciones publicadas aquí funcionó, sin embargo, las siguientes sí lo hicieron:

-webkit-transform: translateZ(0);

Todo el crédito a esta respuesta a través de esta respuesta posterior

Me encontré con este problema con imágenes en una cuadrícula, cada imagen estaba anidada en una que tenía display: inline-block declarado. La solución que Jamland publicó anteriormente funcionó para corregir el problema cuando la pantalla: inline-block; fue declarado en el elemento padre.

Tenía otra cuadrícula donde las imágenes estaban en una lista desordenada y pude simplemente declarar display: block; y un ancho en el elemento de la lista principal y la visibilidad del reverso declarado: oculto; en el elemento de imagen y no parece haber ningún cambio de posición al pasar el mouse.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

La solución alpipego se me sirvió en este problema. Use -webkit-backface-visibility: hidden; Con esto la imagen no se mueve en la transición de opacidad de desplazamiento

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

Tuve problemas con todas las otras soluciones aquí, ya que requieren cambios en el CSS que pueden romper otras cosas: la posición: relativa requiere que reconsidere completamente cómo estoy posicionando mis elementos, transform: rotate (0) puede interferir con el existente se transforma y da pequeños efectos de transición cuando tengo un conjunto de duración de transición, y la visibilidad del reverso no funcionará si alguna vez necesito un reverso (y requiere muchos prefijos).

La solución más perezosa que encontré es establecer una opacidad en mi elemento que está muy cerca, pero no del todo, 1. Esto solo es un problema si la opacidad es 1, por lo que no se romperá ni interferirá con ninguno de mis otros estilos:

opacity:0.99999999;

Después de haber marcado la respuesta de Rick Giner como correcta, descubrí que no solucionaba el problema.

En mi caso, tengo imágenes de ancho de respuesta contenidas dentro de un div de ancho máximo. Una vez que el ancho del sitio cruza ese ancho máximo, las imágenes se mueven al pasar el mouse (usando la transformación CSS).

La solución en mi caso fue simplemente modificar el ancho máximo a un múltiplo de tres, tres columnas en este caso, y lo solucionó perfectamente.

Noté que tenías opacidad incluida en tu CSS. Tuve exactamente el mismo problema con Chrome (la imagen se mueve al pasar el mouse) ... todo lo que hice fue deshabilitar la opacidad y se resolvió, no más imágenes en movimiento.

.yourclass:hover {
  /* opacity: 0.6; */
}

Tuve el mismo problema, mi solución fue poner la clase antes de src en la pestaña img.