Pourquoi mon image bouge-t-elle au survol dans Chrome et comment puis-je y remédier ?

L'image se déplace au survol - Problème d'opacité CSS dans Chrome

Lorsque vous survolez les vignettes de la page Web liée ci-dessous, l'image se déplace légèrement vers la droite, un problème observé uniquement dans Chrome.

http://www.lonewulf.eu

Le CSS suivant est utilisé :

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

Bien que ce problème puisse être lié à la transformation, une solution plus efficace consiste à appliquer ce qui suit à l'élément de survol qui utilise l'opacité :

-webkit-backface-visibility: hidden;

La visibilité arrière influence la transformation, et spécifier cette propriété uniquement pour WebKit est suffisant car il s'agit d'un problème spécifique à WebKit. D'autres préfixes de fournisseurs peuvent exister.

Reportez-vous à http://css-tricks.com/almanac/properties/b/backface-visibility/ pour plus d'informations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!