Movimento de imagem ao passar o mouse: resolvendo o problema de opacidade no Chrome

Os usuários relataram um problema com imagens se movendo ligeiramente para a direita ao passar o mouse, mas apenas no Chrome. Esse problema surge do uso de opacidade para controlar a transparência da imagem.

Inspecionando o CSS

Para investigar o problema, examinamos o CSS fornecido:

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

Resolvendo o problema

Uma solução alternativa consiste na utilização da propriedade -webkit-backface-visibility nos elementos de foco com opacidade. Esta propriedade afeta como a face posterior do elemento é renderizada quando transformada. Nesse caso, ele aborda o movimento não intencional causado por alterações de opacidade no Chrome.

Aplique a seguinte propriedade ao estado de foco:

-webkit-backface-visibility: hidden;

Considerações adicionais

A propriedade -webkit-backface-visibility é específica para navegadores WebKit, portanto, você pode precisar de prefixos de fornecedor para outros mecanismos. Para obter informações mais abrangentes, consulte a documentação dos truques CSS.