CODEWITHSUNDEEP
htmlcssgoogle-chromefontsrendering
Ryan Peschel
Ryan Peschel

Reputation: 11828

Why do I sometimes need to use CSS hardware acceleration to prevent text flickering?

This is going to be difficult to ask because I cannot for the life of me produce a standalone example despite my best efforts, so I'm going to have to hope that someone is already familiar with this problem. Also, this issue doesn't seem to occur with system fonts, but does with fonts like Inter.

I'm using the Inter font on my website. It looks great but there is an issue where sometimes the text is rendered as bolder than it should be (it also sometimes momentarily flashes bolder during hover events). Eventually I figured out that I can fix this issue by applying the backface-visibility: hidden attribute on elements afflicted with this issue.

It seems random as to what elements it affects. The vast majority of the website works fine, but occasionally I'll find a tag that has this issue and I have to slap a backface-visibility: hidden attribute on it to fix it. Also, this doesn't happen on all browsers and operating systems. The issue is non-existent on Mac devices from what I've seen. On Windows it will sometimes appear while hovering over elements, etc.

Alright, so why not just apply this CSS rule to the root document so it applies to every element? Performance.

Apparently this rule forces some sort of GPU acceleration of some sort? I'm not entirely too clear on the details but the FPS on my website tanked when I applied this globally. However, there is still the issue where the few remaining tags it is on can cause FPS performance issues if there is enough of that element.

So my question: what is causing this, and is there a performant fix? I cannot simply apply backface-visibility: hidden to every element because it destroys the performance of my website, but even applying it to the few random elements that pops up causes performance issues. What is causing some elements to randomly have this weird bolded text effect?

I found this post which seeems to reference the flickering and the use of backface-visiblity hidden and its corresponding performance issues, but no solution as of yet.

Edit: After performing additional research, it seems that it's not just backface-visibility: hidden which fixes it, but any CSS property that elicits hardware acceleration. So, putting transform: translateZ(0); onto the element also fixes it, but also has the performance issues. What is still needed to know is why this graphical flickering happens with fonts like Inter but not system fonts, and only on some operating systems and browsers. Also, there seems to be some interaction with hover events that cause absolutely positioned elements to become visible causing later elements on the page to flicker.

Upvotes: 6

Views: 499

Answers (2)

user14325562
user14325562

Reputation:

I think you add this code

-webkit-transform: translate3d(0, 0, 0);

to the flickering elements, and thus rendering them in 3D on page load, they no longer had to switch.

This is the reference article.

Upvotes: 1

Ozone
Ozone

Reputation: 1353

The problem has to do with the rendering of those specific elements on the page. The parent elements in which those texts sit should be even numbers large (same even numbers).

Just make sure total height remains EVEN and adjust margins and paddings accordingly.

Upvotes: 0

Related Questions