1958206 - Sticky positioned element inside subgrid is contained to top level grid, not to subgrid box.

Status: VERIFIED FIXED

(Core :: Layout: Grid, defect)

Description

[Raul Bucata]

Environment:
Operating system: Mac OS X 10.15.7
Firefox version: Firefox 137.0

Steps to reproduce:

1. Navigate to: https://codepen.io/RJWadley/pen/pvoqwBr
2. Scroll the page and observe the output

Expected Behavior:
Sticky elements behave the same as in Chrome

Actual Behavior:
Sticky elements behave different compared to Chrome

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/152027

Comment 1

[Raul Bucata]

Attachment: chr vs ff.mp4

Comment 2

[Alice0775 White]

I can reproduce the issue on Nightly139.0a1 Windows11.

Regression window:
https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=0ecb7e708492896313626fd3b3e3fbb8f32c42dc&tochange=eba2e80d463c05af9efe7aeba92fa82ff2d9f02a

Suspect: Bug 1679797

Comment 3

[BugBot [:suhaib / :marco]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 4

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 1679797

:emilio, since you are the author of the regressor, bug 1679797, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

I'm not sure I agree with the expectation. The sticky pos is laid out in the whole grid container, because its parent is a subgrid... Then again I guess the subgrid could be considered its own container too, for sticky pos purposes...

Ting-Yu, any strong opinions? Maybe we should fix bug 1679797 in some other way (like what I suggested in bug 1679797 comment 7 or so?).

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case from comment 0

Comment 7

[[e-mail]]

Is it the same reason for broken smooth scrolling or should i open a different bug report?

Comment 8

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Re comment 5:

Then again I guess the subgrid could be considered its own container too, for sticky pos purposes...
Ting-Yu, any strong opinions? Maybe we should fix bug 1679797 in some other way (like what I suggested in bug 1679797 comment 7 or so?).

A subgrid is a grid container itself, so it seems reasonable for it to act as a containing block for sticky positioning purposes. Both Chrome and Safari have the same behavior, so we might want to consider switching our behavior to align with them, assuming it's not too difficult to implement.

Comment 9

[Robbie Wadley]

I've ran into this a few times when using subgrid as a page level macro grid for horizontal alignment. Something like this:

grid-template-columns:
  [fullbleed-start]
  20px
  [main-start column-1-start] 1fr [column-1-end] 10px
  [column-2-start] 1fr [column-2-end] 10px
  [column-3-start] 1fr [column-3-end] 10px
  [column-4-start] 1fr [column-4-end main-end]
  20px
  [fullbleed-end];

In order to align items horizontally, you need 'propagate' the subgrid down your tree like so:

grid-column: fullbleed; /* or any column */
display: grid;
grid-template-columns: subgrid;

I've been using this method to consistently align elements horizontally across entire pages. Currently there's no way to propagate the subgrid through a sticky element, since doing so would makes the sticky element align to the entire page (but only in firefox).

I think laying the sticky out on the parent grid could make sense if both the sticky and the subgrid were both affecting the same axis. When the two are in different directions though, like with a vertical sticky and horizontal columns, it doesn't make much sense to me.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1958206 - Allow subgrids to be containing blocks again. r=dholbert,TYLin,#layout

Instead, ensure we end up with a reasonable containing block reflow
input for subgrid to avoid regressing the parent.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e787eae82043
https://hg.mozilla.org/integration/autoland/rev/4efa50d34e63
Allow subgrids to be containing blocks again. r=TYLin,layout-reviewers

Comment 14

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

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

Comment 15

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/4efa50d34e63

Comment 16

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

Upstream PR merged by moz-wptsync-bot

Comment 17

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox146 to wontfix.

For more information, please visit BugBot documentation.

Comment 18

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: See blocked bug.
• Code covered by automated testing: yes
• Fix verified in Nightly: yes
• Needs manual QE test: yes
• Steps to reproduce for manual QE testing: See duplicate bugs.
• Risk associated with taking this patch: low
• Explanation of risk level: Relatively straightforward fix.
• String changes made/needed: None
• Is Android affected?: yes

Comment 19

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1958206 - Allow subgrids to be containing blocks again.

Instead, ensure we end up with a reasonable containing block reflow
input for subgrid to avoid regressing the parent.

Original Revision: https://phabricator.services.mozilla.com/D272370

Comment 20

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/00c3e560a0e9
https://hg.mozilla.org/releases/mozilla-beta/rev/e2c496b38315

Comment 21

[Peter Magyari (Desktop QA)]

Verified fixed using Nightly 147.0a1 (20251119095727) and Beta 146.0b5 (20251119090309) on Windows 10, MacOS 15.5 and Ubuntu 24.04.