Maison >interface Web >tutoriel CSS >Pourquoi mes transitions CSS provoquent-elles un flou et un mouvement de l'image dans Chrome ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-12-25 18:18:09964parcourir

Why Are My CSS Transitions Causing Image Blur and Movement in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn