-
Notifications
You must be signed in to change notification settings - Fork 508
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scroll to URL Fragment no longer works on Chromium browsers #8049
Comments
I was just checking on Chrome, it seems like perhaps only a subset of pages are affected. For example, this page's scroll behavior is still working. But indeed the page OP mentioned: Element/canvas#attr-moz-opaque as well as some other element/xxx pages don't seem to have working scroll effects. |
@tlylt In my case, scroll behavior also doesn't work on the mentioned |
hmm that's strange, here's a recording from my device: Y06otLjqKG.mp4 |
This appears to be the result of our sidebar auto-scroll: if the browser viewport is long enough for the sidebar to not scroll, then scrolling to the anchor link on page load works. However, if viewpoint is too short and the sidebar does scroll, then scrolling to the anchor link doesn't work. This is quite clever behaviour in Chrome, but does feel like a bit of a bug upstream, as we're not scrolling the main body of the page (where the anchor exists), just the sidebar element (where it doesn't). I can repro in the latest nightly chromium build. We could work around this, but I get the feeling it would be messy and edge-case-ridden, something like: scrolling the sidebar on page load unless an anchor exists in the url, where we wait until a scroll event is fired on the document to scroll the sidebar. @caugner if you agree we shouldn't attempt a workaround, I can report this upstream |
@LeoMcA Yes, that's a very good idea! |
Hey @oliverdunk, thanks for looking into this - this is a weird bug for sure. This is the yari/client/src/document/organisms/sidebar/index.tsx Lines 42 to 53 in 4adef0f
Before filing the Chromium issue above, I attempted to create a more minimal test case, but couldn't reproduce the behaviour outside of MDN (obviously there's some nuance to our implementation I'm missing, perhaps its something in the React layer). e.g. this behaves as expected in Chromium when accessed like <!DOCTYPE html>
<html>
<head>
<style>
html, aside {
scroll-behavior: smooth;
}
aside {
overflow: scroll;
height: 100px;
}
aside div {
margin-bottom: 200px;
}
h1 {
margin-top: 100vh;
}
</style>
</head>
<body>
<aside>
<div>scrolling element</div>
</aside>
<h1 id="anchor">an anchor</h1>
<script>
if (location.search === "?scroll") {
document.querySelector("aside").scrollTo({ top: 100 });
}
</script>
</body>
</html> |
It looks like this is being prioritized by the Chrome team: https://issues.chromium.org/issues/325081538 |
It looks like a fix is landing in Chrome 130: |
Summary
When I enter a page with a URL fragment, the content of the page is not automatically scrolled to the identified element.
URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#attr-moz-opaque
It happens on every page though
Reproduction steps
Expected behavior
Actual behavior
Device
Desktop
Browser
Chrome
Browser version
Stable
Operating system
Windows
Screenshot
No response
Anything else?
On firefox, it works fine
It might be related to #7450
Validations
The text was updated successfully, but these errors were encountered: