New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
frivoal opened this Issue Apr 4, 2017 · 15 comments

Comments

Projects
None yet
8 participants
@frivoal
Contributor

frivoal commented Apr 4, 2017

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

@javifernandez

This comment has been minimized.

Show comment
Hide comment
@javifernandez

javifernandez Apr 4, 2017

Contributor

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.

Contributor

javifernandez commented Apr 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@frivoal

frivoal Apr 5, 2017

Contributor

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.

Contributor

frivoal commented Apr 5, 2017

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

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Apr 7, 2017

Contributor

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

Contributor

fantasai commented Apr 7, 2017

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

@fantasai

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Apr 7, 2017

Contributor

Clarified: 55a77e0

Contributor

fantasai commented Apr 7, 2017

Clarified: 55a77e0

@frivoal

This comment has been minimized.

Show comment
Hide comment
@frivoal

frivoal Apr 12, 2017

Contributor

@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?

Contributor

frivoal commented Apr 12, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Apr 12, 2017

Member

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

Member

tabatkins commented Apr 12, 2017

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

@frivoal

This comment has been minimized.

Show comment
Hide comment
@frivoal

frivoal Apr 13, 2017

Contributor

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?

Contributor

frivoal commented Apr 13, 2017

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 astearns removed the Agenda+ label Apr 18, 2017

@astearns

This comment has been minimized.

Show comment
Hide comment
@astearns

astearns Apr 18, 2017

Member

Added to FTF agenda

Member

astearns commented Apr 18, 2017

Added to FTF agenda

@css-meeting-bot

This comment has been minimized.

Show comment
Hide comment
@css-meeting-bot

css-meeting-bot Apr 19, 2017

Member

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

css-meeting-bot commented Apr 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@javifernandez

javifernandez Apr 19, 2017

Contributor

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

Contributor

javifernandez commented Apr 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@SelenIT

SelenIT Jul 9, 2017

Collaborator

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.

Collaborator

SelenIT commented Jul 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@frivoal

frivoal Jul 10, 2017

Contributor

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

Contributor

frivoal commented Jul 10, 2017

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

@hober

This comment has been minimized.

Show comment
Hide comment
@hober

hober Jul 18, 2017

Member

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/

Member

hober commented Jul 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@SelenIT

SelenIT Jul 19, 2017

Collaborator

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

Collaborator

SelenIT commented Jul 19, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment