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

92

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

— zefs
fuente

No se mueve para mí en22.0.1229.94 m

— Danny

3

Es una buena práctica colocar el cursor sobre la etiqueta A, no la imagen en sí.

— Diodeus - James MacFarlane

Sí .img es una clase href. ¿Debería darle un nombre diferente? tal vez ahora entra en conflicto con <img src>? EDITAR: Nvm, cambié el nombre de .img a .thumb y sigo teniendo este problema. ¿Alguna otra sugerencia?

— zefs

Probablemente sea algo que esté haciendo Fancybox.

— Diodeus - James MacFarlane

4

usar una traducción en el eje Z fue la única solución que funcionó para mí: stackoverflow.com/questions/12502234/…

— Larry

231

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.

— alpipego
fuente

Esta es la respuesta correcta, pero debe decir que la backface-visibilitypropiedad debe establecerse en el imgelemento. En mi caso, el elemento que tiene la opacidad fue el aelemento que envolvió el img, por lo que tu respuesta no fue perfecta para mí. Por cierto, también encontré esta falla en Firefox para Mac, así que sugiero usar los prefijos de todos los proveedores.

— Oliboy50

1

@ Oliboy50 Lo siento, tengo que argumentar eso. En mi caso, los elementos defectuosos eran simples divs vacíos con background-image. @alpipego ¡Gracias por la solución!

— Bonflash

1

Esto funcionó para mí, pero hizo que mis imágenes se vieran mal, pixeladas en lugar de suaves.

— Kieran Hunter

1

No sé por qué funciona, pero me encontré con esto y lo intenté. Esto solucionó un error que seguía apareciendo en mi sitio durante meses y que nunca pude descubrir. ¡Gracias!

— Shnibble

También tuve que agregar un z-indexpara que el efecto de desplazamiento funcionara correctamente para mí.

— Jack

34

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.

— Rick Giner
fuente

1

¿Alguien sabe a que se debe esto? Seguramente no es una cosa de hasLayout.

— sidonaldson

7

Tuve el mismo problema en Firefox hace un momento. Pariente no lo solucionó, pero configurar esto en el elemento lo hizo - transform: translate3d(0px,0px,0px);

— ConorLuddy

Tuve el mismo problema en Safari y transform: translate3d(0px,0px,0px);trabajé

— zevnicsca

21

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.

— Beskow
fuente

1

Gracias por esto. ¡Esto lo solucionó en Firefox! : D

— Hans Wassink

Sí, yo tambien. El truco del reverso no me funcionó (img dentro de a), ¡pero este sí lo hizo! ¡Gracias!

— mikmikmik

Esta es la única respuesta que funcionó para mí (Chrome). ¡Gracias!

— Kid Diamond

14

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.

— Nick F
fuente

10

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

— Jamland
fuente

10

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

— Juan Casares
fuente

El mismo problema con una transición de filtro al pasar el mouse. Esto me lo arregló también.

— Josh Harrison

Usando filtro: brillo (1); en el elemento img me lo arregló, gracias

— Sai

esto funcionó para mí, tuve un problema de 1px al aplicar el filtro de escala de grises en una imagen al pasar el mouse. ¿Por qué los desarrolladores de navegadores no pueden arreglar todas esas cosas finalmente? ¿Por qué tengo que usar la visibilidad del reverso y todo eso ...?

— Varin

Esto lo corrige, pero la animación de transición deja de funcionar

— Amin

6

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
}

— andersra
fuente

4

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

— James Fletcher
fuente

Probé todas las otras respuestas, ¡esta fue la primera que funcionó!

2

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

— usuario2125009
fuente

2

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;

— Lenin Zapata
fuente

2

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;

— Josh de Qaribou
fuente

1

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.

— sidonaldson
fuente

1

Gracias por el comentario, también noté que la posición relativa no siempre funciona como solución, por lo que si este problema vuelve a aparecer, también probaré su método.

— zefs

0

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; */
}

— cssninja
fuente

0

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

— Varado como
fuente