Remove content-visibility hack from the docs

[CyberAP]

Current implementation of content-visibility hack to achieve better performance completely breaks scrolling on the site. This PR suggests removing this hack until a better solution is found.

Fixes #40099

Screen.Recording.2022-02-06.at.04.30.24.mov

[Trott]

@nodejs/website

[tniessen]

Potential issues were mentioned in the original PR about a year ago: #37301 (comment) (cc @aduh95)

[Trott]

Just in case anyone wants confirmation, I can confirm that this fixes the scrollbar issue.

[aduh95]

For a little more context, this is a Blink-specific issue: they are the only one who have implemented content-visibility, and their performance at rendering large HTML documents is not great (compared to say Firefox).

Personally, I never interact with the scrollbar, I have no use for it, so I would take better performance over scrollbar funkiness any day.
With this PR being open, I understand that my use case is not universal and there is also of subset of users who find usefulness in the scrollbar, which is why this PR and #40215 have been opened.

We can't please both types of users, whatever we decide to go with, it will be the equivalent of telling one group or the other "sorry you can't use our docs with your current browser, please Firefox instead (or fight with with Google and Microsoft so they fix the underlining issue in Blink)".

Removing this hack makes rendering the docs with a Chromium-based browser much slower, whether or not you are using the scrollbar, so I'm not convinced it would be beneficial overall.

[silverwind]

I generally agree that the hack needs to be removed if it interferes with scrolling like shown.

I do wonder if there are better solutions. I may be wrong, but I think PR diffs on GitHub use some kind of lazy-loading that does not interfere with scrolling while still rendering pretty fast. Maybe it's some JS-based approach they are using. Another benefit of JS-based would be that it will work in all browsers.

[zbjornson]

+1 for landing this and backporting to previous versions. Firefox is progressing toward shipping CSS containment (enabled in Nightly since March 2nd), and in that browser the docs page TOC links jump to random locations with these two CSS rules, making the API docs infuriating to use.

I've verified that removing these rules fixes both the scrollbar jittering (#40099) and the TOC links (#47106).

[vweevers]

The fact that this fixes the TOC links should be the focus (and motivation for landing it) because IMO that's much more frustrating than the scrollbar jittering, enough so that it trumps the performance concern.

[ovflowd]

I believe entirely this should land ASAP, and we can create a backport compatibility plan afterwards. The more we take time for landing this the more we postpone on improving the user experience.

[ovflowd]

Note that this cannot land as it is because the width of the page is not respected and gets broken, so a few tweaks need to be done, such as CSS grids. I can amend changes to this branch as also the initial commit does not adhere to guidelines.

[ovflowd]

This needs to land, but, removing content-visibility introduces a bug on content-shift and the content not respecting the page's max-width.

So we need to amend some changes before this can get merged.