content-visibility: auto and the scrollbar problem

Earlier this week on Twitter, I came across a tweet about content-visibility and the rendering boost that it supposedly provides. I was surprised to find out that it is a relatively new feature launched on August 2020.

Cross verifying it with Can I Use, I was content about the coverage. So I did the thing that I naturally had to. Implement it, release it on the same day for the job board :)

I ran a performance test using Chrome and saw that there was a marked improvement in Rendering tests (of 60%) as it was promised.

Couple of days later, I noticed a problem when I scrolled up from the footer and there was definitely a janky scroll issue with the scroll bar flickering. Things I checked:

• Tried a different browser to make sure the problem wasn't the browser or addons
• Tried a different device to ensure it is not my old MacBook Pro unable to handle things anymore
• Checked both Production and Dev environments to confirm these weren't caused by other changes
• Checked whether this was a TailwindCSS issue (was definitely sure this wouldn't be it)

Started looking at the recent commit, it was easy to see that content-visibility would be most possible culprit. This seems to be a documented issue and there are fixes for it. The performance gain isn't worth this hacky fix and I would rather not mess with something I do not know.

I missed this from the official documentation, and the explanation makes sense:

In order to realize the potential benefits of content-visibility, the browser needs to apply size containment to ensure that the rendering results of contents do not affect the size of the element in any way. This means that the element will lay out as if it was empty. If the element does not have a height specified in a regular block layout, then it will be of 0 height. This might not be ideal, since the size of the scrollbar will shift, being reliant on each story having a non-zero height.
- from web.dev