Difficult and miscellaneous problems: A Study on the phenomenon of text fuzziness caused by transform

On our page , This kind of problem often happens , Text or border in an area , At the time of display , Become particularly blurred , as follows ( The data is desensitized )：

In terms of normal , It should be ：

emmm, Maybe the big picture is not very obvious , Let's take a detailed comparison , It's very intuitive ：

When is this phenomenon triggered ？

that ？ When will this problem be triggered ？ stay Google On , In fact, we can find many similar cases , In conclusion ：

1. When an ancestor container of a text element exists transform: translate() perhaps transform: scale() etc. transform In operation , Prone to this problem

Of course , This is just a necessary condition , Not a sufficient condition . Continue to explore , Will find , Some other conditions must be met at the same time ：

2. The element acts transform: translate() perhaps transform: scale() The resulting calculated value produces a non integer

for example , The above case triggered CSS The code is as follows ：

.container {
    position: absolute;
    width: 1104px; 
    height: 475px;
    top: 50%;
    transform: translateY(-50%);
    // ...
}

Because the height of the element is 475px,translateY(-50%) be equal to 237.5px, Non integer , That led to the blurring of the internal font .

however , It should be noted that , Not all generated non integers cause internal font blur .

Here's a simple sign ：

Or the above example , When the height from 477px Adjust until 469px In the process of , Only 477px and 475px Caused ambiguity , and 473, 471, 469 There is no . therefore , This is only a necessary condition for causing ambiguity .

3. Whether the text content is blurred is also related to the screen , HD screen （dpr > 2） It's not easy to trigger , More happens on a normal screen （dpr = 1）

In the course of my actual measurement, I also found , This phenomenon basically only occurs in dpr by 1 Under the normal screen .

Be similar to MAC High definition screens are less likely to trigger this problem .

dpr = Physical pixel / Device independent pixel , Represents the device pixel ratio . This is what we usually call the retina screen （ Multiple screens ,Retina screen ） of . The device pixel ratio describes the state of not scaling , Initial scale relationship between physical pixels and device independent pixels .

4. Not all browsers behave like this , It basically happens in chromium kernel .

Why does this happen ？

that , Why does this happen ？ In response to this question , No special official answer was found , It is generally believed that it is because ：

Because the browser splits the layer into GPU To carry on 3D transformation , Instead of integer pixel offsets , bring Chrome When rendering Fonts , Not so precise .

On this question , Those interested can take a look at these two discussions ：

• Chromium Bugs -- Issue 521364: Transformed text at fractional offsets is very blurry.
• Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome #2275

How to solve ？

So for this problem , How can we solve it ？ A scheme given in the community ：

1. Set the element -webkit-font-smoothing: antialiased

font-smooth CSS Property is used to control the smoothing effect of font rendering , This feature is nonstandard , We should try not to use it in a production environment . And in my actual measurement , This method doesn't work very well .

2. Ensure that transform: translate() perhaps transform: scale() The height and width of the element are even

If you give the element transform The value of is very clear , For example, I used it in the above example to center the elements horizontally and vertically -- transform: translate(-50%, -50%), It is feasible to make the height and width of elements even , But if you're not sure transform Value , for example transform: translateX(-31.24%) Or is it transform: scale(1.05)`, Then this method still doesn't work .

3. Abandoning transform

If this problem is fatal to your page , Then you can only discard transform, Looking for alternatives . Most of the time , We can still find something that doesn't use transform An alternative to .

To sum up , This paper briefly explores in Chromium Under kernel , Used transform The phenomenon of blurring the internal text , And some tentative solutions are given , Actually meet , Need more debugging , Try the best solution .

Last

Okay , This concludes the article , I hope this article has been helpful

More exciting CSS Technical articles summarized in mine Github -- iCSS , Continuous updating , Welcome to point a star Subscribe to the collection .

Any questions or Suggestions , Communicate more , Original article , Writing co., LTD. , Pretty good , If there is anything wrong with the text , All hope to inform .