Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Scroll to URL Fragment no longer works on Chromium browsers #8049

Open
3 tasks done
NiedziolkaMichal opened this issue Jan 25, 2023 · 10 comments
Open
3 tasks done

Scroll to URL Fragment no longer works on Chromium browsers #8049

NiedziolkaMichal opened this issue Jan 25, 2023 · 10 comments
Assignees
@LeoMcA
Labels
3rd-party Issues related to third-parties, such as Pocket or Google Translate idle on hold Waiting on something else before this can be moved forward.

Comments

@NiedziolkaMichal
Copy link
Member

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

  1. Open Chrome
  2. Go to the specified URL
  3. Watch how the page is not scrolled down

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
@tlylt
Copy link

tlylt commented Feb 1, 2023

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.

@NiedziolkaMichal
Copy link
Member Author

@tlylt In my case, scroll behavior also doesn't work on the mentioned Content categories page.

@tlylt
Copy link

tlylt commented Feb 1, 2023

@tlylt In my case, scroll behavior also doesn't work on the mentioned Content categories page.

hmm that's strange, here's a recording from my device:

Y06otLjqKG.mp4

@LeoMcA
Copy link
Member

LeoMcA commented Feb 20, 2023

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

@caugner
Copy link
Contributor

caugner commented Feb 20, 2023

I can report this upstream

@LeoMcA Yes, that's a very good idea!

@LeoMcA
Copy link
Member

LeoMcA commented Feb 20, 2023

Reported: https://bugs.chromium.org/p/chromium/issues/detail?id=1417660

@mirunacurtean mirunacurtean added browser-compat issues related to the browser compatibility data tables (BCD) and removed browser-compat issues related to the browser compatibility data tables (BCD) labels Mar 30, 2023
@github-actions github-actions bot added the idle label Jun 21, 2023
@oliverdunk
Copy link

Hey @LeoMcA / @caugner - I came across this and was wondering if you could point me to the code that does this in MDN? I'm trying to figure out if it's something we might be able to fix on the Chrome side (or at least, I can say if that's unlikely).

@LeoMcA
Copy link
Member

LeoMcA commented Aug 1, 2023

Hey @oliverdunk, thanks for looking into this - this is a weird bug for sure. This is the useEffect which triggers the scroll on the sidebar (when the currently highlighted sidebar item is off screen):

yari/client/src/document/organisms/sidebar/index.tsx

Lines 42 to 53 in 4adef0f

useEffect(() => {
const sidebar = document.querySelector("#sidebar-quicklinks");
const currentSidebarItem = sidebar?.querySelector("em");
if (sidebar && currentSidebarItem) {
[sidebar, sidebar.querySelector(".sidebar-inner-nav")].forEach(
(n) =>
n?.scrollTo({
top: currentSidebarItem.offsetTop - window.innerHeight / 4,
})
);
}
}, []);

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 file://[...]/index.html?scroll#anchor (with both the element and whole page scrolling):

<!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>

@bsmth bsmth mentioned this issue Sep 4, 2023
Closed
@oliverdunk oliverdunk mentioned this issue Sep 29, 2023
Closed
@caugner caugner mentioned this issue Oct 9, 2023
Closed
@github-actions github-actions bot removed the idle label Jan 24, 2024
@github-actions github-actions bot added the idle label Feb 23, 2024
@Josh-Cena Josh-Cena mentioned this issue Apr 5, 2024
Closed
@bsmth bsmth mentioned this issue May 14, 2024
Closed
@caugner
Copy link
Contributor

caugner commented May 15, 2024

It looks like this is being prioritized by the Chrome team: https://issues.chromium.org/issues/325081538

@caugner caugner added on hold Waiting on something else before this can be moved forward. 3rd-party Issues related to third-parties, such as Pocket or Google Translate and removed needs decision from engineering labels May 15, 2024
@github-actions github-actions bot removed the idle label May 15, 2024
@github-actions github-actions bot added the idle label Jun 15, 2024
@Josh-Cena Josh-Cena mentioned this issue Jul 7, 2024
Closed
@bsmth
Copy link
Member

bsmth commented Sep 3, 2024

It looks like a fix is landing in Chrome 130:

@github-actions github-actions bot removed the idle label Sep 3, 2024
@yin1999 yin1999 mentioned this issue Oct 2, 2024
Merged
@github-actions github-actions bot added the idle label Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@LeoMcA LeoMcA

Labels
3rd-party Issues related to third-parties, such as Pocket or Google Translate idle on hold Waiting on something else before this can be moved forward.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@caugner @LeoMcA @oliverdunk @tlylt @bsmth @mirunacurtean @NiedziolkaMichal