Maison > interface Web > tutoriel CSS > Pourquoi « translate3d » provoque-t-il un texte flou après les animations dans les navigateurs Webkit ?

Pourquoi « translate3d » provoque-t-il un texte flou après les animations dans les navigateurs Webkit ?

Susan Sarandon
Libérer: 2024-11-12 22:13:02
original
682 Les gens l'ont consulté

Why Does `translate3d` Cause Blurry Text After Animations in Webkit Browsers?

Distorsion du texte post-animation induite par Webkit : résoudre l'énigme de Translate3d

La prévalence des navigateurs basés sur Webkit, y compris Safari de l'iPhone, a a mis en lumière un phénomène déroutant : le texte devient flou après des animations optimisées par "-webkit-transform: Translate3d". Ce problème a tourmenté d'innombrables développeurs, les laissant perplexes.

À la base du problème se trouve la dépendance du site à l'égard des animations de curseur basées sur JavaScript. Cependant, lorsque vous utilisez Translate3d pour ces animations, la clarté du texte s'effondre, en particulier sur iPhone. Les "correctifs" courants comme la suppression du positionnement relatif et l'ajout de "-webkit-font-smoothing: antialiased" se sont révélés infructueux.

La seule solution viable qui élimine cette distorsion est l'abandon de translation3d au profit d'une animation JavaScript pure. Cependant, Translate3d offre l'attrait de performances supérieures sur les appareils WebKit. La question persistante demeure : pourquoi Translate3d a-t-il un effet si néfaste sur le texte ?

Bien qu'une réponse définitive reste insaisissable, une solution de contournement a émergé pour atténuer le problème :

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);
Copier après la connexion

Cette approche peu orthodoxe semble atténuer le flou. Bien qu'il ne s'agisse pas d'une solution parfaite, cela offre un certain répit face à la frustration liée au texte post-animation flou.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal