#anchor links on npmjs.com pages don't work on Safari

[johnnydecimal]

Link to the page

Any npmjs.com package front page, e.g. request - npm

Logged in or logged out?

Both

Expected behavior

Clicking an #anchor link, typically (but not always) in the TOC, should jump you to that link on the page. As per HTML behaviour since ~1990.

Actual behavior

It doesn't.

Steps to reproduce the problem

1. Use Safari on any platform.
2. Click an in-page link.

Browser with version

Safari, all latest, tested on macOS, iPhone, iPad.

Works as expected on Chrome.

Any error message?

No. Silent failure.

What's happening?

As far as I understand, Github is injecting a "user-content" prefix on to the page id properties. These are visible in the source, e.g.:

<a id="user-content-streaming" class="deep-link" href="#streaming" aria-hidden="true" rel="nofollow">

The TOC has the link as:

[page base url]#streaming

This does not work in Safari.

Furthermore...

Navigating to [page base url]#user-content-streaming works as expected.

Editing the page in the dev console so that the id of the element is streaming makes the TOC work as expected.

[Reinmar]

Confirmed:

The link don't match the ids.

E.g. the https://www.npmjs.com/package/ckeditor5#releases link will scroll you to a completely different place in the document than the heading from which I copied this link:

[Reinmar]

PS. This is not only about Safari. I guess it just doesn't work at all.

[johnnydecimal]

Chrome and Firefox on macOS both seem to make it work, though. What do they know that Safari doesn't?

[Reinmar]

It doesn't work on my Chrome@macOS. This link https://www.npmjs.com/package/ckeditor5#releases should get me to the "Releases" heading. Not the "releases" link somewhere in the middle of the content.