I've been looking into an issue for work where Google Chrome loads a URL ending in an anchor and scrolls to the incorrect position on the page. Imagine linking to the third heading on a page and Chrome scrolling to a indeterminable position above that. Firefox is not affected.
After ruling out all JavaScript and the particular HTML source code, it turns out that disabling the html { scroll-behavior: smooth; } CSS style fixes the issue. My theory so I suspect there is a race condition between determining the length of a page and position of the element while scrolling? This results in bugreports such as "Anchorlink going to the wrong place"
Regular behaviour is also partially broken
What's more interesting is that blink based browsers are unable to scroll to the anchor even after the page is already loaded!
Testcase:
- load https://downloads.vandragt.com/test-long.html#test This page has an id attribute test set on the header but is otherwise plain text. Any other page will also work though.
- The page loads and the scrollposition is correctly set at the test header.
- Scroll up a paragraph or more than a screen, and refresh the page. Notice the scrollposition isn't set.
- Optionally refresh many times, or press the Enter key in the address bar to attempt to reload the page. However the scroll-position is now permanently broken until you navigate away from the page.
This results in bug-reports such as "It only goes to a place when you first enter the URL to the browser, it doesn’t go to the same place when you re-fresh the page". Together this erodes the trust in the application and honestly it's hard to believe this has not been more widely reported.
There's probably an elaborate JavaScript solution but in my opinion a browser's bugs should be fixed by the browser, because in the future when the browser fixes itself a workaround might result in incorrect behaviour. #technology