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

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%);

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!