Anchor links within tables don’t scroll to target content in Firefox

[mattstein]

Description

Anchor scroll behavior is inconsistent specifically in Firefox. (With this issue, behavior is fine in Chrome, Safari, and Edge.)

Choosing an anchor link that’s inside a table in the page content will update the browser URL without scrolling to page content as expected. In the case of the Controller Actions pages, choosing the exact same item from the sidebar/TOC menu works as expected.

Pages where this can be observed:

• https://craftcms.com/docs/3.x/dev/controller-actions.html
• https://craftcms.com/docs/commerce/3.x/dev/controller-actions.html
• https://craftcms.com/docs/3.x/config/ (see CRAFT_BASE_PATH link)

Steps to reproduce

1. Visit one of the pages above in Firefox.
2. Find a link within a table in the main content and click it.
3. Observe that nothing happens.
4. Find the equivalent link in the sidebar or other page copy and click it.
5. Observe that you’re immediately scrolled to the expected content.

Additional Information

Firefox 88.0 on macOS 11.3.

[mattstein]

Related: vuepress/vuepress-community#71

Seems to be an issue with smooth scrolling in Firefox. Disabling the scroll-behavior: smooth property immediately has anchor links working again in this project:

html {
  /* scroll-behavior: smooth; */
}

Prior to that change it had helped to switch from bare anchors like [foo](#foo) to include the page like [foo](current-page.md#foo)—but results were inconsistent.

A quick test with vanilla HTML and CSS worked fine in Firefox, which means the problem must have to do with Vue Router and Firefox when scroll-behavior: smooth.