1914178 - scroll-snap not working on empty sized generated content

Status: RESOLVED FIXED

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

Description

[Bramus]

Attachment: snap-to-bottom-firefox.mp4

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Steps to reproduce:

The scroll-snap spec includes ^1 the following example on how to make sure an element remains snapped at the bottom

.log {
  scroll-snap-type: y proximity;
  align-content: end;
}
.log::after {
  display: block;
  content: "";
  scroll-snap-align: end;
}

Actual results:

When building a demo that uses this CSS ^2, it does not seem to work in Firefox – see attached recording - whereas in other browsers (Chrome/Safari) it does.

Expected results:

As per spec, this example should work.

Noteworthy is that when changing the snapping from ::after to :last-child ^3, it does work fine. This leads me to the conclusion that scrol-snapping does not work properly on generated content.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Thanks Bramus for filing this issue.

To be precise what the real problem is that the generated content in question is empty sized because of content: "", if the property is something like content: "after", then things work fine.

The problem in code is here in ScrollSnapInfo::ForEachValidTargetFor, we use BaseRect::Intersects which unfortunately returns false for empty size rectangle.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1914178 - Handle empty sized contents as valid targtes for CSS scroll snap. r?emilio

Also this change treats edge cases
(e.g. snappedPort.x == target.mSnapArea.XMost()) as valid, I think it would be
better results.

Comment 4

[Bramus]

Thanks for digging into this, Hiroyuki. It’s clear to me now that authors can add something like min-height: 1px to the generated content in order to work around this bug.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4901f46fe69d
Handle empty sized contents as valid targtes for CSS scroll snap. r=emilio

Comment 6

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

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

Comment 7

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/4901f46fe69d

Comment 8

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

Upstream PR merged by moz-wptsync-bot