Pourquoi la mise à l'échelle CSS et Translate3D provoquent-elles un texte flou dans les navigateurs WebKit ?

L'énigme du texte flou de WebKit avec mise à l'échelle CSS et Translate3D

Dans Chrome et d'autres navigateurs WebKit, appliquer la mise à l'échelle CSS aux côtés de Translate3D entraîne un flou indésirable effet pour le contenu mis à l’échelle. Un exemple notable de ceci peut être vu dans le JS Fiddle fourni.

Comprendre le problème

Les navigateurs WebKit traitent essentiellement les éléments transformés en 3D comme des textures pour l'accélération matérielle 3D. Cette approche conduit à un artefact flou lorsque ces éléments subissent à la fois une mise à l'échelle et une translation3d.

Solution de contournement proposée

Malheureusement, il n'existe pas de solution de contournement directe pour ce problème spécifique. Cependant, on peut atténuer le flou en augmentant la taille du texte et en réduisant l'échelle de l'élément entier. Cela crée efficacement une texture de plus haute résolution, réduisant la visibilité du flou.

Dans le Fiddle fourni (http://jsfiddle.net/SfKKv/), la taille du texte a été augmentée et décalée pour correspondre à la quantité de translation3d qui a été appliquée. De plus, une ombre de texte a été introduite pour améliorer encore l'anticrénelage.

Points à noter

Il est important de reconnaître que cette solution de contournement n'éliminera pas entièrement le flou, en particulier avec petites polices ou bords nets. Si l'objectif ultime est d'obtenir un texte net, il peut être nécessaire d'envisager d'autres approches ou techniques de rendu.

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!