Pourquoi mon image se déplace-t-elle directement au survol dans Chrome ?

Mouvement d'image au survol dans Chrome : résolution des problèmes d'opacité

Un problème particulier a été identifié sur la page Web http://www. lonewulf.eu, impliquant le mouvement d'une image en survol. Ce phénomène est exclusif à Chrome, ce qui incite à enquêter sur le CSS sous-jacent.

Le CSS fourni comprend plusieurs déclarations d'opacité, indiquant le niveau de transparence de l'image. Cependant, lorsque l'état de survol est activé, l'image se déplace subtilement vers la droite.

Une solution potentielle à cet artefact visuel consiste à incorporer la propriété suivante dans l'élément de survol qui régit l'opacité :

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

La visibilité arrière concerne le comportement des éléments soumis à des opérations de transformation. Lorsque l'image se déplace lors du survol, cette propriété empêche un tel déplacement involontaire. Le préfixe webkit s'applique exclusivement aux navigateurs Web basés sur le moteur WebKit, tels que Chrome.

Pour une compréhension complète de la visibilité arrière et de ses implications, reportez-vous à la documentation CSS-Tricks à l'adresse http://css- tricks.com/almanac/properties/b/backface-visibility/.

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!