Pourquoi les éléments transformés sont-ils irréguliers dans Chrome et comment « -webkit-backface-visibility » peut-il aider ?

Élimination des bords irréguliers dans Chrome : un boost de précision de la transformation CSS

La transformation d'images et de zones de texte à l'aide de la transformation CSS3 peut améliorer l'attrait visuel d'un site Web. Cependant, un problème courant rencontré dans Chrome concerne l'apparition de bordures irrégulières, ressemblant aux graphiques basse résolution des jeux vidéo. Alors que d'autres navigateurs comme IE, Opera et FF gèrent les opérations de transformation avec un anti-aliasing fluide (AA), Chrome présente le problème.

Cause des bords irréguliers

Le La raison derrière les bords irréguliers réside dans la façon dont Chrome traite les éléments transformés. Contrairement aux autres navigateurs, Chrome s'abstient d'utiliser AA lors de la gestion des transformations, ce qui entraîne un aspect rugueux de la bordure.

Solution : -webkit-backface-visibility

Pour surmonter Pour résoudre ce problème dans Chrome, la propriété CSS -webkit-backface-visibility peut être utilisée. En définissant cette propriété sur masqué, le navigateur est invité à supprimer la visibilité de la face arrière d'un élément transformé.

Considérons l'exemple suivant :

.rotate2deg {
    -webkit-backface-visibility: hidden;
}

En ajoutant cette propriété au règle de transformation, Chrome est obligé d'utiliser AA, éliminant les bords irréguliers et produisant des bordures lisses pour les éléments pivotés.

Supplémentaire Considérations

Bien que la propriété -webkit-backface-visibility résolve efficacement le problème des bords irréguliers dans Chrome, il convient de noter qu'elle ne concerne que les navigateurs basés sur Chrome. Les navigateurs comme Firefox et Edge utilisent leurs mécanismes AA par défaut, rendant cette propriété superflue.

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!