Pourquoi le texte est-il flou lors de l'utilisation de Translate3d et Scale3d dans les navigateurs WebKit ?

L'énigme du texte flou : mise à l'échelle CSS et Translate3d dans WebKit

Les navigateurs WebKit, y compris Chrome, présentent un problème particulier : le texte est mis à l'échelle en CSS le contenu devient visiblement flou lorsque Translate3d est appliqué simultanément. Ce comportement est évident dans l'exemple JS Fiddle fourni.

Exemple JS Fiddle :

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

<div class="test">
  <div class="testInner">
    This text becomes blurry in WebKit browsers when translate3d and scale3d are applied.
  </div>
</div>

Dépannage :

Pour atténuer ce problème, il est recommandé de :

• Augmenter la taille du texte :Augmentez la taille de la police du texte pour compenser le flou causé par la mise à l'échelle et la traduction.
• Réduire l'élément : Réduisez la taille de l'élément contenant pour l'adapter au texte agrandi. Cela crée essentiellement une texture de résolution plus élevée pour le texte, améliorant ainsi la clarté.

Exemple :

/* Increase text size */
.testInner {
  font-size: 1.5em;
}

/* Downscale element */
.test {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(0.8);
}

Remarque :

Bien que cette solution de contournement résolve le problème de flou, elle peut toujours entraîner un anticrénelage médiocre. Pour améliorer la lisibilité, pensez à ajouter une légère ombre de texte au texte dans l'élément .testInner.

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!