Pourquoi l'animation WebKit Translate3d rend-elle mon texte flou ?

Problème de texte flou basé sur Webkit dans Translate3d Animation : une énigme persistante

Les navigateurs basés sur WebKit, y compris l'omniprésent iPhone, ont été en proie à des problèmes par un problème persistant qui se manifeste par un texte flou ou déformé lors de l'utilisation de Translate3d pour animations.

Malgré une enquête approfondie, la cause exacte de ce phénomène reste insaisissable. Diverses solutions de contournement, telles que la suppression du positionnement relatif et l'implémentation de -webkit-font-smoothing: antialiased, se sont révélées inefficaces.

La seule solution fiable identifiée jusqu'à présent est d'abandonner Translate3d et de recourir à des animations purement basées sur JavaScript. Cependant, cela entraîne une pénalité de performances significative sur les appareils compatibles WebKit.

Un utilisateur a signalé un correctif partiel en introduisant des ajustements de pixels fractionnaires dans les valeurs de translation3d. L'extrait de code suivant illustre cette approche :

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

Bien que cette solution puisse apporter un certain soulagement, elle ne parvient pas à résoudre le problème fondamental et peut ne pas convenir à tous les scénarios.

Comme le la recherche d'une solution plus robuste se poursuit, les développeurs sont obligés d'équilibrer les performances et la fidélité graphique, en pesant les avantages de Translate3D par rapport au potentiel de dégradation du texte. Il reste l’espoir qu’une résolution définitive émergera, permettant un rendu transparent du texte animé sur toutes les plateformes.

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!