Pourquoi les images se déplacent-elles vers la droite au survol dans Chrome et comment y remédier ?

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 enquêter sur le problème, nous examinons le CSS fourni :

<code class="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;
}</code>

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 résout le mouvement involontaire provoqué par les changements d'opacité dans Chrome.

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

<code class="css">-webkit-backface-visibility: hidden;</code>

Considérations supplémentaires

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

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!