Pourquoi mes transitions CSS rendent-elles les images floues ou décalent-elles les divisions dans Chrome ?

Images floues et divs décalés dans les transitions CSS dans Chrome

Dans les transitions CSS, l'application d'un effet de traduction à un div peut entraîner des conséquences inattendues, comme un flou d'image ou un décalage de 1 px dans l'image. Ce problème est particulièrement évident lorsque des barres de défilement sont présentes sur la page. Le coupable derrière ce problème réside dans la nature tridimensionnelle inhérente aux transformations CSS.

Solution : appliquer le rendu plat

Pour remédier à cette situation, la propriété CSS -webkit -backface-visibility peut être appliqué au div, le forçant à apparaître plus bidimensionnel. Cette propriété indique au navigateur de ne pas afficher la face arrière du div, aplatissant ainsi son apparence.

De plus, définir -webkit-transform sur translationZ(0) scale(1, 1) garantit que le div reste dans le même plan et évolue correctement.

Mise à jour Syntaxe :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

En aplatissant le div, ces propriétés CSS empêchent la transition de manipuler par inadvertance les propriétés tridimensionnelles du div, ce qui entraîne une transition fluide et sans flou.

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!