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

[jordanbtucker]

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]

@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]

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]

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

[marvhock]

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]

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

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.

[i0air]

'Remember language' 功能使页面自动切换为本地语言，而锚点(Anchor)文本没有变化，这可能是一个原因，或者是个新问题？

[caugner]

@jordanbtucker It looks like this issue is resolved, and Chrome scrolls even if the tab was opened in the background. So I'm going ahead and mark this as resolved.

'Remember language' 功能使页面自动切换为本地语言，而锚点(Anchor)文本没有变化，这可能是一个原因，或者是个新问题？

@i0air The issue you're describing is different, and isn't new, but indeed it can be observed more often with the new Remember language feature. We currently have no way of redirecting an English section anchor to the corresponding translated section anchor. We have recently discussed possible solutions internally, but haven't decided yet.