[css-align][css-flexbox][css-grid] partial implementations of space-evenly in grid but not flexbox

[frivoal]

See this twitter conversation: https://twitter.com/lajava77/status/849182533791227904

TL;DR: Safari and Chrome ship justify-content: space-evenly, but it only works in grid, not in flexbox.

In their implementations, in flexbox, it falls back to the same behavior as flex-start. But since it parses fine, you cannot use the cascade or @support to provide a different fallback.

The real solution is for both browsers to fix this by completing their implementation, but my question is:

• should they unship justify-content: space-evenly until then (even though it works fine in grid)?
• If no, as a stopgap measure until full implementation, should they make it behave like justify-content: space-around (most similar) or justify-content: center (specified as the fallback alignment, for different situations)?

Should the spec say something about this particular kind of partial implementations, besides what's already in https://drafts.csswg.org/css-align/#conform-partial

@mrego @javifernandez @tabatkins @fantasai

[frivoal]

https://bugs.webkit.org/show_bug.cgi?id=170445
https://bugs.chromium.org/p/chromium/issues/detail?id=708121
web-platform-tests/wpt#5336

[javifernandez]

The problem is that CSS Alignment spec tries to define the alignment behavior for different layout models
https://drafts.csswg.org/css-align-3/#distribution-details

I don't think is a good idea not to ship the feature until is implemented in every layout model, which probably will take years.

[frivoal]

I don't think is a good idea not to ship the feature until is implemented in every layout model, which probably will take years.

Which is why I think it is important that we think through (and document) how we expect this to be released to minimize breakage.

[fantasai]

We can clarify here, but certainly in the two contexts in which the property works, all supported keywords should be equally supported.

[fantasai]

Clarified: 55a77e0

[frivoal]

@fantasai so if I understand correctly, chrome and safari should either unship justify-content: space-evenly, or fix it to work properly in flexbox as well as in grid ASAP. Leaving it supported only in grid for a prolonged period, or implementing a temporary stopgap fallback ("do the same as space around", "use the fallback alignement instead") would not be OK. However, they do not need to make justify-content work in other layout modes first. Correct?

@mrego Is that OK for you?

[tabatkins]

Yes, your summary is correct. (And I agree with @fantasai 100% here.)

[frivoal]

I agree it's desirable, but I was left under the impression that this made some of the steps too big for blink and webkit's tastes, and that you intentionally shipped things that were only implemented for grid because updating flexbox increased the size of the task by too much.

I'd be happy if this was a misunderstanding though. @mrego @javifernandez, any thoughts?

[astearns]

Added to FTF agenda

[css-meeting-bot]

The CSS Working Group just discussed partial implementations of space-evenly in grid but not flexbox.

The full IRC log of that discussion

<astearns> topic: partial implementations of space-evenly in grid but not flexbox
<myles> Hi
<myles> ScribeNick: myles
<astearns> github topic: https://github.com/w3c/csswg-drafts/issues/1167
<myles> Florian: we need people from blink and WebKit here
<myles> Florian: the "alignment" properties apply to all layout modes
<myles> Florian: The spec describes how to do this, but browsers don't follow
<myles> iank_: are there bugs?
<myles> Florian: these browsers support the keywords on flex box but not grid
<myles> Florian: you can't use @supports because the browsers do "support" the value
<myles> Florian: they shouldn't have shipped it.
<myles> myles: we will not un ship it
<myles> TabAtkins: it's easy to fix. We will probably fix it
<myles> shane: are there issues?
<myles> Florian: yes
<myles> Florian: you could also just provide a less shitty fallback if you want
<fantasai> myles: We, WebKit, are regretful that we shipped it and want to fix this.
<myles> shane: we have an old patch which gets us at least partway there. We can pick it up.
<myles> shane: people are responsive.

[javifernandez]

I started to work on a fix for Blink/Chrome in the bug https://crbug.com/170445, reported by @frivoal.

BTW, shouldn't the Flexbox spec be updated accordingly ? It still refers to the old values:

https://drafts.csswg.org/css-flexbox/#justify-content-property

Name: justify-content
Value: flex-start | flex-end | center | space-between | space-around

[SelenIT]

It seems that a bit similar problem is there in Safari with display:contents now. They have implemented it for <slot> element, so the value is parsed and the browser claims that it @supports it, but you can't use it for any other element yet.

[frivoal]

@smfr @grorg @hober @litherum @rniwa See previous comment.

[hober]

Re: the original issue, WebKit fixed its support of justify-content: space-evenly for Flexbox in https://trac.webkit.org/changeset/216536/webkit

Re: display: contents, care to file a bug, @SelenIT? https://bugs.webkit.org/

[SelenIT]

@hober I added a comment to the bug already filed by you: https://bugs.webkit.org/show_bug.cgi?id=157477#c2