Firefox does not smooth scroll to headings unless the heading or permalink is already visible in the viewport

[Ambient-Impact]

This may be a Firefox bug or something somewhere in our JavaScript codebase is causing it to abort the scroll and instantly snap to the element being focused. This could be related to #11 which is a nasty anchor scroll bug in Chrome.

Details and clues:

1. Turning JavaScript completely off via dev tools makes it work totally fine, with smooth scroll both when clicking a table of contents link and during back/forward navigation.
2. If the target is already in the viewport when the link is clicked, smooth scrolling occurs as expected.
3. If the target isn't in the viewport, it snaps instantly without any smooth scrolling, but seems to stop when the element is in the centre of the screen rather than the element being at the top as it's expected to be.

Solutions

There's an open issue on Bugzilla for what sounds like this problem, so maybe we can just wait for Firefox to fix this, assuming this is the same issue.

Hotwire Turbo

Actually, upon further testing, it seems like this may very well be a bug only when Hotwire Turbo is in use. There's an open issue with a lot of details and potential but hacky workarounds.

Links

• https://medium.com/@JanPaul123/maintaining-scroll-positions-in-all-browsers-a280d49bffca
• https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration
• https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView