1540203 - overflow-anchor difference in behavior compared to Chrome

Status: RESOLVED FIXED

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

Description

[Łukasz]

Attachment: overflow-anchor-bug.gif

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

Open this:
https://www.wykop.pl/wpis/39850511/xd-humorobrazkowy-film-avengers-heheszki/
Click "Kliknij aby rozwinąć obrazek" on bottom image when image top is over page viewport.

Actual results:

The image unfolds up.

Expected results:

The image should reveal itself down.
This page behaves in Google Chrome.

Comment 1

[Łukasz]

Attachment: overflow-anchor-chrome.gif

Comment 2

[Paul_B]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Hi reporter,

Thank you for taking the time to add this report.
I was able to reproduce the behavior you described across all the latest Firefox builds and OS-es (windows 10, Ubuntu 18.04 and Mac OS 10.14).

I am going to add this to Core: Document Navigation component for an advised input. If this is not the proper component, please feel free to change it to a more appropriate one.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Where are you specifying overflow-anchor: none?

If I turn on layout.css.scroll-anchoring.highlight, then I see that the votersContainer element is getting selected as an anchor on Firefox. If I specify overflow-anchor: none on that element I properly get the desired effect.

Comment 4

[Łukasz]

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

Where are you specifying overflow-anchor: none?

If I turn on layout.css.scroll-anchoring.highlight, then I see that the votersContainer element is getting selected as an anchor on Firefox. If I specify overflow-anchor: none on that element I properly get the desired effect.

Do not understand the question.

This is not my site, I'm just a user.

It works fine in Chrome, so I think you should do as it does in Chrome. I gave a gif how it looks in Chrome.

There should be no requirement to use overflow-anchor: none; anywhere in this case.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case.

I see, thanks, I was confused by the bug title then. I attached a reduced test-case for the issue.

I think per https://drafts.csswg.org/css-scroll-anchoring/#anchor-node-selection, we're right. In particular:

The anchor node is either a non-anonymous block box or a text node.

Where block box is https://drafts.csswg.org/css-display-3/#block-box. An inline-block element is clearly not a "block box", so the next anchor node is the text, which is what Firefox chooses, and why we preserve the offset relative to the text and not the red box.

I'll file an issue on the specification to get a clarification on the Chromium behavior.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I filed https://github.com/w3c/csswg-drafts/issues/4247.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

So the Chrome folks replied saying that this is an issue in the specification they wrote, sigh.

I'll fix Gecko (to follow what model though? There's no spec).

Comment 8

[Emilio Cobos Álvarez (:emilio)]

I have even more questions in the spec issue. I think the Chrome behavior of skipping inlines but not inline-blocks makes no sense.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1540203 - Tweak scroll anchor selection to allow to select everything but inline-fragmentable, non-text boxes.

Per the discussion in https://github.com/w3c/csswg-drafts/issues/4247.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

I proposed something in the issue, implemented above.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/20d20876ee64
Tweak scroll anchor selection to allow to select everything but inline-fragmentable, non-text boxes. r=dholbert

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/19055 for changes under testing/web-platform/tests

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 14

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/20d20876ee64

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot