la imagen se mueve al desplazarse – 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 imágenes en miniatura, la imagen se mueve un poco a 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 usar

 -webkit-backface-visibility: hidden; 

en el elemento estacionario que tiene la opacidad. La visibilidad de la cara posterior se relaciona con la transform , por lo que la de @Beskow tiene algo que ver con eso. Como se trata de un problema específico de un sitio web, solo necesita especificar la visibilidad de la cara posterior de webkit. Hay otros prefijos de proveedor .

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 aplicas la position:relative atributo CSS position:relative a tus elementos a.img, no habrá más movimiento a la izquierda / derecha ya que su opacidad varía.

Tuve el mismo problema, lo arreglé con la rotación de transformación css. Me gusta esto:

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

Funciona bien en los principales navegadores.

Necesitaba aplicar backface-visibility y transform reglas para evitar este problema. Me gusta esto:

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

Tuve un problema similar con los filtros (no opacidad) en el vuelo estacionario. Se corrigió añadiendo una regla a la clase base con:

 filter: brightness(1.01); 

Otra solución que me solucionó este problema fue agregar la regla:

 will-change: opacity; 

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

La mayoría de las otras soluciones sugeridas aquí que implican transformaciones (por ejemplo, translateZ(0) , rotate(0) , translate3d(0px,0px,0px) , etc.) funcionan al entregar la pintura del elemento a la GPU, lo que permite una representación más eficiente . will-change proporciona 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 hacky (ya que está abordando explícitamente el problema en lugar de simplemente presionar el navegador para usar la GPU).

Habiendo dicho eso, vale la pena tener en cuenta que el soporte del navegador no es tan bueno para will-change de will-change (aunque si el problema es con Chrome solo entonces, ¡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.

backface-visibility (o -webkit-backface-visibility) solo solucionó el problema en Chrome para mí. Para solucionar 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 fluctuarían a medida que su opacidad cambiara. Ninguna de las correcciones publicadas aquí funcionó, sin embargo, lo siguiente:

 -webkit-transform: translateZ(0); 

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

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

Tenía otra cuadrícula donde las imágenes estaban en una lista desordenada y pude declarar la pantalla: bloquear; y un ancho en el elemento de la lista principal y la visibilidad de la cara posterior: oculta; en el elemento de la imagen y no parece haber ningún cambio de posición en el vuelo estacionario.

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

La solución alpipego me fue servida en este problema. Usar -webkit-backface-visibility: hidden; Con esto, la imagen no se mueve en la transición de opacidad hover

 /* 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: posición: relativa me exige replantear completamente cómo estoy posicionando mis elementos, transformar: rotar (0) puede interferir con los existentes Transforma y da pequeños efectos de transición cuando tengo un conjunto de duración de transición, y la visibilidad de la cara posterior no funciona si alguna vez realmente necesito una cara posterior (y requiere un montón de prefijos).

La solución más simple que encontré es simplemente establecer una opacidad en mi elemento que es muy cercana, pero no del todo, 1. Esto es solo un problema si la opacidad es 1, así que no va a romper o interferir con ninguno de mis otros estilos:

 opacity:0.99999999; 

Habiendo marcado la respuesta de Rick Giner como correcta, descubrí que no solucionó el problema.

En mi caso, tengo imágenes de ancho de respuesta 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 era simplemente modificar el ancho máximo a un múltiplo de tres, tres columnas en este caso, y lo arregló perfectamente.

Noté que tienes opacidad incluida en tu CSS. Tuve el mismo problema con Chrome (la imagen moviéndose en el air) … todo lo que hice fue desactivar la opacidad y se solucionó, no se movieron más imágenes.

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

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