Pourquoi -webkit-transform:transform3d provoque-t-il un texte flou dans les navigateurs basés sur WebKit ?

Post-animation de texte flou dans les navigateurs basés sur WebKit via Translate3d

Certaines animations implémentées à l'aide de -webkit-transform : translate3d dans WebKit les navigateurs, tels que l'iPhone, peuvent entraîner un texte flou ou déformé. Ce problème provient du moteur de rendu du navigateur et reste persistant malgré les tentatives pour l'atténuer via des solutions de contournement CSS telles que la suppression du positionnement relatif ou l'application de -webkit-font-smoothing: antialiased.

Alors que les méthodes d'animation basées sur JavaScript résolvent ce problème , ils nuisent aux performances sur les appareils compatibles WebKit. Pour contourner le problème sans sacrifier la vitesse, une solution de contournement consiste à modifier légèrement les valeurs de transformation :

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

Ce décalage fractionnaire élimine efficacement le flou, tout en conservant les avantages en termes de performances de l'animation Translate3D.

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!