Broken fragment links on the website on Safari

[dvd101x]

Description

Hi, I was trying to follow the install instructions on the website and found that the fragment links are not working properly in Safari in macOS, iOS and iPadOS. When clicked they show the top of the website.

It's very inconvenient as one gets even further away from the link one is supposed to follow, it's better to scroll until the desired section is in view, but then if another fragment link is clicked it goes again to the top of the website.

In Firefox and Chrome the fragment links points approximately one paragraph above where they are supposed to but the appropriate section is in view.

You can reproduce the issue by opening in Safari for MacOS, iOS and iPadOS.
https://stdlib.io/docs/api/latest#install_command_line_utility
https://stdlib.io/docs/api/latest#install_individual_packages

It works fine from the GitHub readme in all previously described cases.
https://github.com/stdlib-js/stdlib?tab=readme-ov-file#install_command_line_utility
https://github.com/stdlib-js/stdlib?tab=readme-ov-file#install_individual_packages

Related Issues

Related issues # , # , and # .

Questions

No.

Demo

No response

Reproduction

You can reproduce the issue by opening in Safari for MacOS, iOS and iPadOS.
https://stdlib.io/docs/api/latest#install_command_line_utility
https://stdlib.io/docs/api/latest#install_individual_packages

Expected Results

Show the section

Actual Results

Goes back to the top of the page

Version

No response

Environments

Safari

Browser Version

No response

Node.js / npm Version

No response

Platform

No response

Checklist

• Read and understood the Code of Conduct.
• Searched for existing issues and pull requests.

[stdlib-bot]

👋 Hi there! 👋

And thank you for opening your first issue! We will get back to you shortly. 🏃 💨

If you have any further questions while waiting for a response, please join our Gitter channel to chat with project maintainers and other community members.

[kgryte]

@dvd101x Thanks for reporting this. Indeed, I am able to reproduce this on iOS Safari. Not sure the fix atm.

[kgryte]

I can also confirm that it doesn't work on Firefox on iOS. And it doesn't work on MacOS Safari. However, on Chrome-based browsers, the links do work.

[kgryte]

For the curious, here is the website source code where fragment ids are assigned: https://github.com/stdlib-js/www/blob/master/src/components/welcome/installation/index.jsx

[kgryte]

@dvd101x If you are looking to experiment with the latest, I suggest installing the Git repository. We're still gearing up for a new major release, and much of the latest goodness has not made it to npm, yet.

[dvd101x]

Thanks for the quick response!

Ok, will install from Git.

Also found one case on Firefox with the same behavior, but I can't consistently replicate and sometimes in Safari it works.

I found some broken links that I will report in another issue.

[dvd101x]

Something curious is that even though it works in other browsers it's a bit misaligned.
https://stdlib.io/docs/api/latest#install_custom_bundles

I don't have an issue with that, but as a reference in lodash it's very precise. Maybe that difference has something to do with the issue in Safari.

https://lodash.com/docs/4.17.15#concat