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

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

Mary-Kate Olsen

Libérer： 2024-11-12 17:11:02

original

535 Les gens l'ont consulté

Why Does CSS Scaling and Translate3D Cause Text Blurriness in WebKit Browsers?

Mise à l'échelle CSS et Translate3D sur WebKit : provoque un flou du texte

Les navigateurs WebKit, y compris Chrome, présentent un problème particulier où le contenu mis à l'échelle CSS présente un flou important lorsqu'il est combiné avec Translate3D propriété. Ce problème entrave le rendu du contenu et a un impact sur l'expérience utilisateur.

Dans le JavaScript Fiddle fourni, nous pouvons observer le problème. Le code HTML comprend deux

éléments, un avec la classe « test » et un autre imbriqué avec la classe « testInner ». Le CSS stylise l'élément "test" avec une transformation translation3d, tandis que l'élément "testInner" inclut une transformation scale ou scale3d. L'affichage de ce Fiddle dans Chrome révèle un texte flou dans la div "testInner".

La cause première de ce problème réside dans le traitement par WebKit des éléments transformés en 3D comme des textures plutôt que des vecteurs. Cette approche permet une accélération matérielle 3D mais dégrade la qualité du texte. Pour atténuer le problème, une solution de contournement consiste à augmenter la taille du texte et à réduire la taille de l'élément, créant ainsi une texture de plus haute résolution.

Comme démontré dans un Fiddle mis à jour, nous pouvons augmenter la taille du texte dans l'élément "testInner". et réduire l'élément lui-même. Cette approche améliore la qualité du texte, même si l'anticrénelage peut encore être imparfait. Pour améliorer encore la lisibilité, nous pouvons appliquer une ombre de texte pour épaissir les tiges du texte.

En adoptant cette solution de contournement, nous pouvons contourner le problème de flou et obtenir une présentation plus attrayante visuellement du contenu à l'échelle CSS combiné avec Translate3d. Il est crucial de noter que cette solution peut ne pas convenir à tous les scénarios ; cependant, il constitue une alternative précieuse dans les cas où la qualité du texte est primordiale.

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!