Pourquoi Translate3d provoque-t-il un texte flou dans les navigateurs basés sur WebKit ?

Problème de texte flou basé sur Webkit dans les éléments animés utilisant Translate3d

Un problème courant rencontré dans les navigateurs basés sur WebKit, y compris l'iPhone, est texte déformé et flou après la mise en œuvre de Translate3D pour les animations. Cela peut être particulièrement répandu lors de l'utilisation de -webkit-transform: translate3d comme méthode d'animation.

Une solution potentielle suggérée dans les forums impliquait la suppression du positionnement relatif et l'ajout d'une règle -webkit-font-smoothing: antialiased. Cependant, ces ajustements s'avèrent souvent inefficaces.

Solution sale

Comme solution de contournement potentielle, bien que ni élégante ni optimale, ajuster le positionnement en ajoutant une fraction au Il a été rapporté que les valeurs de transformation atténuent le problème :

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

Cette technique repose sur un léger décalage de la transformation avec une fraction, ce qui semble empêcher la transformation effet de flou associé aux animations Translate3D dans les navigateurs WebKit.

Autres considérations :

Les approches alternatives peuvent inclure :

• Utilisation d'animations basées sur JavaScript au lieu de traduire3d.
• Enquêter sur la cause sous-jacente de la distorsion du texte dans l'implémentation spécifique et y remédier directement.

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!