Pourquoi mon image en transition CSS est-elle floue ou décalée de 1 px dans Chrome ?

Transition CSS Chrome Image floue ou décalage de 1px

Un problème courant survient lors de l'utilisation de transitions CSS pour déplacer un div : l'image dans le div devient floue ou se décale légèrement. Ce comportement particulier ne se produit que lorsque la transition implique une traduction et lorsque la page contient des barres de défilement.

Pour résoudre ce problème, vous pouvez implémenter les propriétés CSS suivantes dans le div concerné :

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

Par ce faisant, vous faites effectivement apparaître la division plus « 2D ». Voici une explication de l'objectif de chaque propriété :

• -webkit-backface-visibility: Hidden: Cette propriété masque la face arrière de la division, qui est généralement dessinée par défaut pour permettre le retournement. et les effets de rotation. Puisque vous n'effectuez que des traductions simples, masquer la face arrière élimine le rendu inutile.
• -webkit-transform: translateZ(0) scale(1, 1): Cette propriété attribue le Z- translation de l'axe à zéro, aplatissant efficacement la division dans l'espace 3D. Chrome gère cette propriété de manière native, mais elle est incluse avec le préfixe -webkit- pour la compatibilité avec les anciennes versions de Chromium.

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!