search

mdn / yari

The platform code behind MDN Web Docs
Mozilla Public License 2.0
1.19k stars 508 forks source link

Pages do not scroll to element when opened in Chrome background tab #7168

Open jordanbtucker opened 2 years ago

jordanbtucker commented 2 years ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#examples

What specific section or headline is this issue about?

All headlines on all pages

What information was incorrect, unhelpful, or incomplete?

When a URL with a hash containing an element ID is opened in a background tab in Chrome, the page does not scroll to the element with that ID when the tab is brought to the foreground. When the same URL is opened in a foreground tab, the page scrolls correctly.

Steps to reproduce:

  1. Create a page with a link to an MDN URL with a hash property matching the ID of a valid element, like this URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#examples
  2. In Chrome, right-click the link and select Open link in new tab. This will open the page in a background tab.
  3. Open the background tab to bring it to the foreground.
  4. Note that the page has not scrolled to the element, e.g. the Examples section.

It appears that MDN is using a custom smooth-scrolling feature that does work when a tab is opened in the background. That feature should detect background tabs and possibly wait for the user to open the tab before scrolling.

What did you expect to see?

Pages should scroll to the correct section even when opened in a background tab.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

Josh-Cena commented 2 years ago

@schalkneethling Could you transfer this to Yari? I had been constantly running into this as well. I think this has something to do with hydration (as always...)

schalkneethling commented 2 years ago

Hi @jordanbtucker, thank you for filing an issue. The problem described here is not related to a content change but is something that needs to be addressed by engineering. We file engineering-related issues on the Yari repository. As such, the issue will move over to Yari.

caugner commented 2 years ago

I was able to reproduce this issue in Chrome. In Firefox, the scroll happens as soon as I focus tab.

marvhock commented 1 year ago

I have 2 additions to this bug.

1: Bug is also reproducible in Foreground-Tabs (Open URL in Adressbar directly), e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment#syntax

2: On some pages the bug is reproducible and not on others (Regarding Foreground-Tabs): Bug: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment#syntax Works Correctly: https://developer.mozilla.org/en-US/docs/Web/HTML#beginners_tutorials

Reproduced on: Chrome Version 107.0.5304.121 (Mac), Chrome Canary Version 110.0.5458.0 (Mac), Chrome 108.0.5359.95 (Windows).

OnkarRuikar commented 1 year ago

Just an observation, it doesn't scroll when the page is highlighted in the sidebar: scrollbug

If there is no highlight in the sidebar then it does scroll to the URL fragment. May be sidebar's logic to bring emphasis in the view is messing with the scroll to URL fragment location feature.