Pourquoi le texte basé sur Webkit devient-il flou après l'animation Translate3d ?

Distorsion de texte basée sur Webkit après l'animation avec Translate3d : un problème persistant

Le problème de texte flou ou déformé après l'animation d'éléments à l'aide de Webkit Les navigateurs basés sur les navigateurs Web ont tourmenté les développeurs pendant une période prolongée. Ce problème affecte les navigateurs comme Safari et le navigateur par défaut de l'iPhone.

Contexte :

Les curseurs basés sur JavaScript utilisent souvent la propriété -webkit-transform:translate3d pour une animation fluide. Cependant, cette technique rend par inadvertance le texte flou dans l'élément animé.

Tentatives de résolution infructueuses :

Diverses solutions de contournement ont été tentées pour résoudre ce problème, notamment :

• Suppression du positionnement relatif
• Ajout de -webkit-font-smoothing : antialiased

Cependant, ces mesures se sont révélées inefficaces.

Solution :

Malgré l'exploration de diverses options, la seule solution qui élimine systématiquement le flou du texte est de revenir à l'animation basée sur JavaScript, en contournant complètement Translate3d. Cependant, ce compromis sacrifie les performances sur les appareils compatibles WebKit.

Une solution partielle :

Bien qu'une solution complète reste insaisissable, un remède partiel a été découvert qui atténue les distorsion quelque peu :

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

Cette technique introduit un léger décalage de 0,1 % dans la position et la transformation de l'élément. Même s'il n'élimine pas complètement le flou, il réduit considérablement son impact.

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!