Closed Bug 1540203 Opened 9 months ago Closed 3 months ago

overflow-anchor difference in behavior compared to Chrome

Categories

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

66 Branch
Unspecified
All
defect

Tracking

()

RESOLVED FIXED
mozilla71
Webcompat Priority ?
Tracking Status
firefox66 --- wontfix
firefox67 --- wontfix
firefox68 --- wontfix
firefox71 --- fixed

People

(Reporter: dev.lukaszpolowczyk, Assigned: emilio)

References

(Blocks 1 open bug, )

Details

Attachments

(4 files)

Attached image 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.

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.

Status: UNCONFIRMED → NEW
Component: Untriaged → Document Navigation
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Webcompat Priority: --- → ?
Component: Document Navigation → Layout: Scrolling and Overflow

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.

Flags: needinfo?(dev.lukaszpolowczyk)
Priority: -- → P3

(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.

Flags: needinfo?(dev.lukaszpolowczyk)
Attached file 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.

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).

Flags: needinfo?(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.

Flags: needinfo?(emilio)

I proposed something in the issue, implemented above.

Assignee: nobody → emilio
Pushed by ealvarez@mozilla.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/19055 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Status: NEW → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla71
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.