Pourquoi le texte WebKit est-il flou lors de l'utilisation de CSS scale et Translate3d ?

Flou du texte WebKit avec CSS Scale et Translate3D

Les développeurs rencontrent un problème où le texte rendu dans Chrome et d'autres navigateurs WebKit devient excessivement flou lorsque CSS la mise à l'échelle (scale ou scale3d) est combinée avec les transformations Translate3d. Cela peut être observé dans un exemple simplifié :

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

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

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

Solution de contournement :

Résoudre ce problème nécessite une approche unique car WebKit traite les éléments transformés en 3D comme des textures. plutôt que des vecteurs. Pour résoudre le flou, augmentez la taille du texte et réduisez l'échelle de l'élément, créant ainsi une texture de plus haute résolution.

Un exemple mis à jour avec cette solution de contournement :

<div class="test">
  <div class="testInner">

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

Bien que cette approche soit efficace réduit le flou, il peut encore présenter des problèmes d'anticrénelage. Pour atténuer cela, une ombre de texte peut être ajoutée pour améliorer l'apparence du texte.

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!