Pourquoi mes transitions CSS provoquent-elles un flou et un mouvement de l'image dans Chrome ?

L'effet de transition CSS provoquant un flou et un mouvement de l'image dans Chrome ?

Le problème avec les effets de transition CSS provoquant un flou et un mouvement de l'image dans Chrome peut être attribué aux limitations des transitions CSS lors de la manipulation d'éléments dans certains contextes.

Le Problème

Lors de l'application d'une transition à un élément qui implique un mouvement (traduire), cela peut entraîner des effets secondaires indésirables tels que :

• Flou de l'image
• Mouvement subtil de l'image de 1px

Ce problème est plus prononcé lorsque la page comporte des barres de défilement et est particulièrement évident lorsque plusieurs instances de l'élément affecté sont présentes.

La solution

Pour atténuer ce problème, vous pouvez appliquer les propriétés CSS suivantes à l'élément concerné element:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);

Explication

• -webkit-backface-visibility : caché : Cette propriété demande au navigateur de traiter le élément en 2D, empêchant le rendu de la face arrière par défaut qui peut provoquer artefacts.
• -webkit-transform: translateZ(0) scale(1, 1): Cette propriété force la transformation de l'axe Z à toujours être 0, ce qui contribue également à rendre l'élément apparaître plus 2D.

Supplémentaire Notes

• Ces propriétés étaient à l'origine préfixées par -webkit- pour les anciennes versions de Chrome. Cependant, dans les versions actuelles, vous pouvez utiliser les versions non préfixées :

backface-visibility: hidden;
transform: translateZ(0) scale(1, 1);

• Il est recommandé d'utiliser les dernières versions de Chrome pour des résultats de rendu optimaux.
• Envisagez d'utiliser la propriété CSS de rendu d'image pour améliorer davantage la qualité de l'image pendant les transitions, comme décrit dans les réponses précédentes.

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!