Pourquoi mon image tremble-t-elle lorsque je la survole dans Chrome ?

Survol d'images : problème d'opacité dans Chrome

Lorsque vous rencontrez des problèmes de mouvement d'image lors d'actions de survol dans Chrome, en particulier avec un effet d'opacité, il est essentiel pour s’attaquer à la cause profonde. Dans ce cas particulier, la règle CSS :

opacity: 0.5;

Fait en sorte que l'image devienne translucide (opacité de 50%) lorsque le curseur la survole. Cependant, un problème spécifique à Chrome se produit en raison de l'accélération matérielle et du rendu WebGL.

La solution :

Pour résoudre ce problème, il est recommandé d'implémenter le -webkit- visibilité arrière : cachée ; propriété sur l’élément de survol qui applique l’opacité. Cette propriété concerne la transformation et garantit que le navigateur comprend que l'image se trouve dans un espace 3D, évitant ainsi l'effet de gigue.

Plus précisément, la règle suivante peut être ajoutée au CSS :

.img:hover {
  -webkit-backface-visibility: hidden;
}

Informations supplémentaires :

Il est important de noter que -webkit-backface-visibility est une propriété spécifique à webkit, donc les autres navigateurs peuvent ne pas la prendre en charge. Pour plus d'informations et la compatibilité du navigateur, reportez-vous à la ressource suivante : https://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!