1520581 - Descendant 'overflow: hidden' elements with auto height can prevent effective scroll anchoring

Status: RESOLVED FIXED

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

Description

[Stefan [:StefanG_QA]]

Mozilla/5.0 (Android 8.1.0; Mobile; rv:66.0) Gecko/66.0 Firefox/66.0 (20190116093310)

STR:
1 Open Firefox.
2 Go to https://www.rottentomatoes.com/m/mechanic_resurrection/
3 Scroll down all the way to "Movie Info" section while the other sections aren't loaded

ER: Solid scroll position
AR: The page jump once the content is fully loaded

The same behavior could be observed in the responsive design mode.

https://St3fQA.tinytake.com/sf/MzIzNDMzNF85NjkxMzAz

Comment 1

[Ryan Hunt [:rhunt]]

It looks like we we're not able to select a scroll anchor on this page on mobile.

The reason is that the bulk of the page is contained inside a 'overflow: hidden' div. That element is a scroll frame so it can select a scroll anchor, but the root scroll frame can't select one inside it. This div is never actually scrolled, so it never selects an anchor for itself.

I now know why the Chrome implementation can select scroll anchors within descendant scrollable elements. That works around this situation by allowing the root scroll frame to select an anchor inside these 'overflow: hidden' divs. We'll probably want to support the same thing.

Comment 2

[Ryan Hunt [:rhunt]]

Note, the situation here isn't worse than without scroll anchoring. So I'm categorizing this as a future improvement.

Comment 3

[Ryan Hunt [:rhunt]]

Attachment: scroll-anchor-overflow-hidden.html

Here's a minimal test case that demonstrates the issue.

In this test, #hidden generates a scrolling box (per spec), which causes us to be unable to select an anchor inside of it. But it's also never scrolled and never overflows because it has 'height: auto', making it appear like any other div.

One possible solution would be to allow us to select an anchor inside of another scrolling box if it is unable to be scrolled in the block direction (because it doesn't overflow).

The tricky thing is that ownership of the anchor node is currently tied to the nearest ancestor scroll frame. We'd need to be careful to maintain a clear ownership policy.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1520581 - Allow to select scroll anchors inside nested scroll frames. r=dholbert

As long as the nested scrollframe doesn't maintain an anchor itself.

This is important for pages which use overflow: hidden to contain large
parts of their scrollable content, see bug 1629237 for an example.

When calling InvalidateAnchor(), we may invalidate an ancestor anchor
itself, if we're not maintaining an anchor and our scrolled frame is
part of the anchor chain. This is important to maintain our state
properly.

I was going to add some assertion to this effect but it can fail when
fragmenting inlines already, so for now I've commented it out and filed
bug 1629280 for that. It's not great, but it cannot lead to a security
issue so we probably can fix it with time.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ace4bfaec686
Allow to select scroll anchors inside nested scroll frames. r=dholbert

Comment 7

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/ace4bfaec686