Movimiento de imágenes al pasar el mouse: solucionar el problema de opacidad en Chrome

Los usuarios han informado de un problema con las imágenes que se mueven ligeramente hacia la derecha al pasar el mouse. pero sólo en Chrome. Este problema surge del uso de opacidad para controlar la transparencia de la imagen.

Inspeccionar el CSS

Para investigar el problema, examinamos el CSS proporcionado:

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

Abordar el problema

Una solución alternativa consiste en utilizar la propiedad -webkit-backface-visibility en los elementos flotantes con opacidad. Esta propiedad afecta cómo se representa la cara posterior del elemento cuando se transforma. En este caso, soluciona el movimiento involuntario causado por los cambios de opacidad en Chrome.

Aplique la siguiente propiedad al estado de desplazamiento:

-webkit-backface-visibility: hidden;

Consideraciones adicionales

La propiedad -webkit-backface-visibility es específica de los navegadores WebKit, por lo que es posible que necesite prefijos de proveedor para otros motores. Para obtener información más completa, consulte la documentación de CSS-Tricks.