search

craftcms / docs

Documentation for Craft CMS, Craft Commerce, and other official products.
https://craftcms.com/docs
38 stars 144 forks source link

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

Open mattstein opened 3 years ago

mattstein commented 3 years ago

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:

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 commented 3 years ago

Related: https://github.com/vuepress/vuepress-community/issues/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.