Mouvement de l'image au survol : résoudre le problème d'opacité dans Chrome

Les utilisateurs ont signalé un problème avec les images se déplaçant légèrement vers la droite au survol, mais seulement dans Chrome. Ce problème résulte de l'utilisation de l'opacité pour contrôler la transparence de l'image.

Inspection du CSS

Pour étudier le problème, nous examinons le CSS fourni :

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

Résoudre le problème

Une solution alternative consiste à utiliser la propriété -webkit-backface-visibility sur les éléments de survol avec opacité. Cette propriété affecte le rendu de la face arrière de l'élément une fois transformé. Dans ce cas, il corrige le mouvement involontaire provoqué par les changements d'opacité dans Chrome.

Appliquez la propriété suivante à l'état de survol :

-webkit-backface-visibility: hidden;

Considérations supplémentaires

La propriété -webkit-backface-visibility est spécifique aux navigateurs WebKit, vous pouvez donc avoir besoin de préfixes de fournisseur pour d'autres moteurs. Pour des informations plus complètes, reportez-vous à la documentation CSS-Tricks.