1836206 - justify-content: space-around and space-evenly incorrectly fall back to center (should be safe center)

Status: NEW

(Core :: Layout: Flexbox, defect)

Description

[psychpsyo]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/113.0
Firefox for Android

Steps to reproduce:

1. Create a container with the following:
   display: flex;
   justify-content: space-evenly
   overflow-x: auto
2. Put some items into it and squish the page vertically until the flex box overflows off the screen and becomes scrollable.

Actual results:

The scrolling was done in such a way that items at the beginning of the flex container weren't visible and could not be scrolled to. (they were permanently off the left side of the screen)
This is because both space-evenly and space-around fall back to behaving exactly like center once they overflow.

Expected results:

The fallback behavior for both space-evenly and space-around should have been safe center instead of center as specified here:
https://www.w3.org/TR/css-align-3/#valdef-align-content-space-around

Comment 1

[psychpsyo]

Note: When it asked me, I clicked the checkbox that says that this happens on my phone/tablet but this happens on PC as well.

Comment 2

[Simona Badau, Desktop QA]

Moving this to Core > Layout: Flexbox component to allow our engineers to examine it more closely. If this is not the right component, please move it to a more appropriate one.
Thanks!

Comment 3

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

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

For more information, please visit BugBot documentation.

Comment 4

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

Thanks for the bug report!

In css-flexbox spec https://drafts.csswg.org/css-flexbox-1/#valdef-justify-content-space-around, it still has

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center.

But css-align spec has been updated the fallback value for both space-around and space-evenly from center to safe center in https://github.com/w3c/csswg-drafts/commit/14ec40dfff711fac6fb7308a1e5d88df8bd14f5c, with resolution made in https://github.com/w3c/csswg-drafts/issues/5088.

Firefox haven't updated to reflect the spec resolution yet.

I think the relevant code in nsFlexContainerFrame might be:
https://searchfox.org/mozilla-central/rev/0ddb7a38cdbba30df8f19549f678a22fa16967d1/layout/generic/nsFlexContainerFrame.cpp#3398-3409

Comment 5

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

Attachment: Testcase 1 (from dholbert)

Captures dholbert's testcase in https://github.com/w3c/csswg-drafts/issues/5088#issuecomment-633825679 as a standalone testcase.

Comment 6

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

Tested on Google Canary 115 and Safari 17. Both vendors still behave like Firefox in Testcase 1.

Comment 7

[Ian Kilpatrick [:iank]]

Tested on Google Canary 115 and Safari 17. Both vendors still behave like Firefox in Testcase 1.

We've recently changed our behaviour M116 (or M117) works like Firefox.

Comment 8

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

Attachment: Screenshot Chrome 117, Safari 17 & Firefox 116

Tested with a latest version of Chrome 117, Safari 17 & Firefox 116.

Safari doesn't seem to implement justify-content: safe center (third sub-test.)

Hi Ian,

We've recently changed our behaviour M116 (or M117) works like Firefox.

I'm confused. Do you mean that Chrome has changed the last two sub-tests (space-around and space-evenly) to match Firefox? However, these two should fallback using safe center per spec, but Firefox still renders these two using safe fallback.

Comment 9

[psychpsyo]

I've opened this same bug on the Chromium bug tracker here recently:
https://bugs.chromium.org/p/chromium/issues/detail?id=1517655

Someone there then discovered that the css-align and css-flex specifications actually disagree on whether the fallback should be center or safe center and filed this:
https://github.com/w3c/csswg-drafts/issues/9858

Just thought I'd add this for context.

Comment 10

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

Redirect a needinfo that is pending on an inactive user to the triage owner.
:dholbert, since the bug has recent activity, could you have a look please?

For more information, please visit BugBot documentation.

Comment 11

[Daniel Holbert [:dholbert]]

(In reply to Ting-Yu Lin [:TYLin] (PDT, UTC-7) from comment #8)

We've recently changed our behaviour M116 (or M117) works like Firefox.

I'm confused. Do you mean that Chrome has changed the last two sub-tests (space-around and space-evenly) to match Firefox?

I think Ian was saying newer-than-M116/M117 Chrome versions changed behavior, while Chrome 116 & 117 still matched Firefox, or something along those lines.

In any case, current Chrome "dev" 125 renders the testcase's last two subtests correctly (and differently from Firefox) -- Chrome 125 shows those last two subtests with the red items inside the left edge of the black box. Whereas Firefox still lets them overflow them off of the left side of the black box.

Firefox still renders these two using safe fallback.

I think you were mistaken here -- Firefox wasn't using (& still doesn't yet use) safe fallback for those last two subtests. As shown in your screenshot in comment 8, we're letting the red items overflow off of the left side (the inline-start side) which is the "unsafe" behavior (unsafe because that overflow might end up in unscrollable area, if we're inside of some scroller.)