Pourquoi mes transitions CSS rendent-elles les images floues dans Chrome ?

Effet de transition CSS provoquant des images ou des mouvements flous dans Chrome

Problème :

Lors de l'application d'un effet de transition CSS qui implique En déplaçant une division, Chrome présente un comportement indésirable, tel que rendre l'image de la division floue ou la déplacer légèrement. Ce problème persiste uniquement lorsque la page comporte des barres de défilement.

Solution :

Pour éviter ces effets, implémentez le CSS suivant changements :

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

Explication :

• -webkit-backface-visibility : caché : Désactive le rendu de la face arrière de la division, ce qui n'est pas nécessaire pour les traductions et transformations simples.
• -webkit-transform : translateZ(0) scale(1, 1); Définit la translation de l'axe Z de la division à zéro et la redimensionne à sa taille d'origine, garantissant ainsi que l'image reste en place.

Mise à jour 2020 :

• Pour les images floues, pensez à utiliser la propriété CSS de rendu d'image comme suggéré dans d'autres réponses.
• Pour l'accessibilité et le référencement, pensez à remplacer les images d'arrière-plan par des balises img et à utiliser la propriété CSS object-fit.

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!