Api docs scrolling and anchors appear broken

[eri412]

URL:

https://nodejs.org/api/modules.html (or any other api page)

Browser Name:

Chrome

Browser Version:

112.0.5615.139

Operating System:

Windows 10, 21H2, 19044.2846

How to reproduce the issue:

Weird scrolling behaviour (look at the scrollbar):

Modules_.CommonJS.modules._.Node.js.v20.1.0.Documentation.-.Google.Chrome.2023-05-04.10-22-10.-.Trim.mp4

Anchors periodically send to a wrong subsection & reloading the page with an anchor in the url (sometimes) moves the page upwards.

Modules_.CommonJS.modules._.Node.js.v20.1.0.Documentation.-.Google.Chrome.2023-05-04.10-23-11.mp4

The same issue also appears in Edge and in Chrome on Mint on VM.

[harshitphoenix]

I will work on this one.

[ovflowd]

• The scrolling behaviour seems to be a bug in our JavaScript code behind the scrolling listening on the API docs JavaScript?
• The anchor issue is a known issue on the all.html page, it's a tricky and complex bug and probably not worth to be fixed on the current tooling due to its complexity.
• The issue about when clicking to an anchor being sent to the wrong place also seems to be an issue of the current HTML template and maybe JavaScript of the API docs.

Note that this issue is not an issue of the Website repository, neither for the Website Team. The related code is placed at nodejs/node.

@harshitphoenix feel free to work on them, but they might not be as easy as you think. The 2nd one for example is quite tricky.

I'm moving this issue to https://github.com/nodejs/node repository as it should belong there.

[ovflowd]

I've just found the culprit of the 1st bug, which seems to be related due the styling of content-visiblity on section tags.

content-visibility: auto;
contain-intrinsic-size: 1px 5000px;

I have no idea why we have these styles applied. But nevertheless, I'd be fine removing them.

[ovflowd]

It also seems that by removing these, the overall style gets broken the width of the content not respecting the window width. That should probably be fixed by using CSS grids. And allocating a fixed width of 250px for the first column and 1fr for the 2nd column.

[richardlau]

I've just found the culprit of the 1st bug, which seems to be related due the styling of content-visiblity on section tags.

content-visibility: auto;
contain-intrinsic-size: 1px 5000px;

I have no idea why we have these styles applied. But nevertheless, I'd be fine removing them.

There's already a PR open for this: #41869

[harshitphoenix]

I've just found the culprit of the 1st bug, which seems to be related due the styling of content-visiblity on section tags.

content-visibility: auto;
contain-intrinsic-size: 1px 5000px;

I have no idea why we have these styles applied. But nevertheless, I'd be fine removing them.

There's already a PR open for this: #41869

Does the PR addresses both the issues?

[ovflowd]

Nope.

[mscdex]

There's an existing issue for this here. Unfortunately there hasn't been any movement on it AFAIK since then.

[eri412]

Yep, I initially looked through the issues in the wrong repo.

[ovflowd]

I'm going to reply on the original issue some thoughts.