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

Mise à jour de 2019
Le problème d'affichage de Chrome n'est toujours pas résolu et, bien que ce ne soit pas la faute des utilisateurs, aucune des suggestions proposées dans l'ensemble de ce site Web ne permet de résoudre le problème. Je peux affirmer que j'ai essayé chacune d'entre elles en vain : une seule s'en approche et c'est la règle css : filter:blur(0) ; qui élimine le décalage d'un conteneur de 1px mais ne résout pas le problème d'affichage flou du conteneur lui-même et de son contenu éventuel.

Voici la réalité : il n'y a littéralement aucune solution à ce problème. Voici donc une solution de contournement pour les sites Web fluides.

CASE
Je suis en train de développer un site web fluide et j'ai 3 divs, tous centrés avec des effets de survol et partageant des valeurs de pourcentage dans la largeur et la position. Le bogue de Chrome se produit sur le conteneur central qui est réglé sur left:50% ; et transform:translateX(-50%) ; un réglage courant.

EXEMPLE : D'abord le HTML...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Voici le CSS où le bug de Chrome se produit...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Voici le css corrigé...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Violon bogué : https://jsfiddle.net/m9bgrunx/2/
Correction du violon : https://jsfiddle.net/uoc6e2dm/2/

Comme vous pouvez le constater, une petite modification de la feuille de style en cascade devrait permettre de réduire ou d'éliminer la nécessité d'utiliser la transformation pour le positionnement. Cela pourrait également s'appliquer aux sites Web à largeur fixe ou fluide.

Answer 2

J'ai le même problème. Je l'ai résolu en utilisant :

.element {
  display: table
}

Answer 3

Une autre solution que j'ai trouvée pour les transformations floues (translate3d, scaleX) sur Chrome consiste à définir l'élément en tant que " affichage : inline-table ;". Cela semble forcer l'arrondi des pixels dans certains cas (sur l'axe X).

J'ai lu que le positionnement sous-pixel sous Chrome était prévu et que les développeurs ne le corrigeront pas.

Answer 4

Essayez d'utiliser zoom: 101%; pour les conceptions complexes lorsque vous ne pouvez pas utiliser une combinaison de zoom + échelle.

Answer 5

Il est important d'ajouter que ce problème se pose si l'élément qui est traduit a une hauteur avec un nombre impair de pixels. Par conséquent, si vous avez le contrôle de la hauteur de l'élément, en la fixant à un nombre pair, le contenu apparaîtra plus net.