Difficult and Miscellaneous Diseases: Exploration of the phenomenon of blurred text caused by the use of transform

In our pages, such a problem often occurs. The text or border in an area becomes particularly blurred when displayed, as follows (the data is desensitized):

Normally, it should look like this:

emmm, maybe the big picture is not very obvious, we take a detailed comparison, it is very intuitive:

When is this phenomenon triggered?

So? When will this problem be triggered? On Google, we can actually find a lot of similar cases. To sum up:

1. This problem is prone to occur when transform operations such as transform: translate() or transform: scale() exist in an ancestor container of the text element

Of course, this is only a necessary condition, not a sufficient one. Continue to dig deeper, and you will find that some other conditions must be met at the same time:

2. The calculated value of the element acting on transform: translate() or transform: scale() produces a non-integer

For example, the CSS code triggered by the above case is as follows:

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

Since the height of the element is 475px and translateY(-50%) is equal to 237.5px , which is not an integer, the internal font is blurred.

However, it is important to note that not all non-integers produced result in internal font blurring.

Here is a simple hint:

Still in the above example, when the height is adjusted from 477px to 469px , only 477px and 475px cause blurring, but 473, 471, 469 does not. So, this is only a necessary condition to cause ambiguity.

3. text content is blurred is also related to the screen. It is not easy to trigger on a high-definition screen (dpr > 2), and more often occurs on a normal screen (dpr = 1)

In the process of my actual measurement, I also found that this phenomenon basically only occurs under the ordinary screen with dpr of 1.

HD screens like the MAC are less likely to trigger this problem.

dpr = Physical Pixels / Device Independent Pixels, representing the device pixel ratio. This is related to what we usually call retina screens (multiple screens, Retina screens). The device pixel ratio describes the initial proportional relationship between physical pixels and device-independent pixels in an unscaled state.

4. Not all browsers behave this way, it basically happens in the chromium kernel.

Why does this happen?

So why does this happen? In response to this question, no special official answer has been found. It is generally believed that it is because:

Since the browser splits the layers to the GPU for 3D transformations instead of integer pixel offsets, Chrome is not so accurate when rendering .

On this issue, if you are interested, you 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 how do we solve this problem? A solution given in the community:

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

font-smooth CSS property is used to control the smoothing effect of font rendering. This feature is non-standard and we should try not to use it in production environments. And in my actual test, this method is not very effective.

2. Ensure that the height and width of elements using transform: translate() or transform: scale() are even numbers

If the value of transform you assign to the element is very clear, such as in my example above, it is used to center the element horizontally and vertically -- transform: translate(-50%, -50%) , the method of making the height and width of the element even is feasible, but if you cannot Determine the value of transform , such as transform: translateX(-31.24%) or transform: scale(1.05) , then this method still does not work.

3. Deprecated transform

If this problem is fatal to your page, then only deprecate transform and look for an alternative. Most of the time, we can still find alternatives that do not use transform .

To sum up, this article briefly explores the phenomenon of blurring internal text caused by the use of transform under the Chromium kernel, and gives some solutions that can be tried. In actual encounters, more debugging is required to try the optimal solution.

finally

Well, this is the end of this article, I hope this article will help you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdote 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which is continuously updated. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.