Texte flou après l'utilisation de CSS transform : scale() ; dans Chrome

Question

Il semble qu'une récente mise à jour de Google Chrome rende le texte flou après avoir effectué un transform: scale() . Plus précisément, je fais ça :

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Si vous visitez http://rourkery.com dans Chrome, vous devriez voir le problème sur la zone de texte principale. Ce n'était pas le cas auparavant et cela ne semble pas affecter les autres navigateurs webkit (comme Safari). Il y a eu d'autres messages concernant des personnes rencontrant un problème similaire avec les transformations 3D, mais je n'ai rien trouvé concernant les transformations 2D.

Toute idée serait appréciée, merci !

Answer 1

J'ai essayé beaucoup d'exemples à partir de ces réponses, mais rien ne m'a aidé. Chrome Version 81.0.4044.138 J'ai ajouté à la place un élément de transformation

 transform-origin: 50% 50%;

celui-ci

 transform-origin: 51% 51%;

cela m'aide

Answer 2

J'ai donc essayé toutes les solutions ci-dessus et rien n'a vraiment fonctionné. Mais !

J'ai un div modal-Root dans mon index.html de mon application React. J'y place un composant modal (.modal) si cela est nécessaire. Tout d'abord, j'ai positionné la modale elle-même de manière fixe, en la plaçant en haut à gauche à 50% et j'ai appliqué une transition(-50%, -50%) pour la centrer.

J'ai effectué des zooms avant et arrière et j'ai remarqué que le contenu de la modale était flou si le taux de zoom du navigateur Chrome n'était pas de 100 %. Il peut être de 110 % ou de 90-80-75 %, peu importe. En dehors d'un zoom de 100 %, le contenu était vraiment flou et laid.

J'ai donc décidé de me débarrasser de toute la solution basée sur la transition que j'avais auparavant pour centrer l'enfant de l'élément .modal.

Je positionne mon modal-Root de manière fixe, en le rendant haut-gauche-droit-bas 0, afin qu'il soit toujours à 100vh et wv. Ensuite, j'en ai fait un conteneur flexible et j'ai positionné son enfant via align-items et justify-content centered.

Mais, il y a toujours un "mais". Le modal-Root a un z-index : -1 par défaut. J'ai décidé de le changer programmatiquement en 59 si la modale est ouverte. J'applique également une superposition qui rend le reste de la page plus sombre, c'est-à-dire le .overlay qui a un z-index de 60. Le contenu réel de la modale (.modal) a un z-index de 61.

Je voulais également animer l'entrée de cet élément lorsqu'il apparaît, et je joue donc avec les marges, au lieu de lui appliquer une quelconque transition. Il s'agit d'une animation cubique qui gère la marge supérieure au pourcentage approprié au sein de l'animation, mais à la fin, la marge supérieure est de 0, sans propriété de transition.

C'était un peu dommage de devoir retravailler le composant mais après l'avoir testé, il fonctionne plutôt bien.

Résumé :

• Conteneur parent le plus haut fixe, couvrant toute la page
• Définition du z-index du parentcontainer le plus élevé -1 ou [custom-value] en fonction de l'interaction souhaitée avec la modale (la modale est ouverte).
• Définition de l'index z du conteneur à -1 si la modale est fermée
• Faire du conteneur un flex-container et positionner son enfant au centre
• Animer l'enfant via les valeurs de marge au lieu de la transition

J'espère que cela pourra être utile à certains d'entre vous :)

Answer 3

C'est ce qui a marché pour moi :

body { perspective: 1px; }

Answer 4

J'ai réparé mon affaire en ajoutant :

transform: perspective(-1px)

Answer 5

J'ai supprimé ceci de mon code - transform-style: preserve-3d; et ajouté ceci- transform: perspective(1px) translateZ(0);

le flou a disparu !