1803693 - Header goes missing on a page when loading a fragment URL

Status: RESOLVED DUPLICATE of bug 1419142

(Core :: Layout: Scrolling and Overflow, defect)

Description

[Brian Grinstead [:bgrins]]

Attachment: missing-header.png

STR:

• Load https://bgrins-kitchen-sink.deno.dev/uswds#button-group

Expected: I see the header element
Actual: I don't see the header element. Screenshot has Firefox, Chrome, and Safari from left to right.

The page loads and works fine as long as you don't load a fragment (i.e. clicking on one of the links in the sidebar).

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case.

The issue is that the "tooltip" causes the document to be scrollable (even if overflow: hidden). And scrollIntoView() tries to scroll overflow: hidden stuff as well, so we try to put #ref at the top, which means scrolling "past" the header.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case that repros the issue in Firefox, but not Chrome

Okay so Chrome doesn't seem to be adding to the scrollable area elements that are all the way to the left of the scroller (the left: -999em thingie).

That's weird, I wonder what's up with that... Does any spec say something like that? I guess it makes some amount of sense? But it's def. weird.

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

Created attachment 9306348 [details]
Test-case that repros the issue in Firefox, but not Chrome

Okay so Chrome doesn't seem to be adding to the scrollable area elements that are all the way to the left of the scroller (the left: -999em thingie).

That sounds like the setup in bug 1517287; maybe this is a dupe of that?

Comment 4

[Daniel Holbert [:dholbert]]

(See also bug 1770516 which has perhaps a clearer description, though I ended up duping to bug 1419142. This bug is probably also a dupe of bug 1419142 based on emilio's observation, unless I'm misunderstanding.

Per bug 1419142 comment 7, there was a spec update which I think makes Chrome's behavior correct here.