[css-align] Content-distribution keywords that fall back to "center" can't be made safe

[tabatkins]

If you use content-distribution keyword, like "space-between" on a flexbox or grid, and the content overflows the container, it defaults to unsafely centering the content.

But you can't specify safe alignment with a content-distribution keyword! So there's just no way for an author to deal with this, except guess at the screen sizes where it might overflow and use an MQ to change it to something safe.

I propose that we specify that the distribution keywords that currently fall back to "center" instead fall back to "safe center".

(If UAs would just implement the "smart" overflow behavior - be unsafe unless it would push content into the unscrollable area - we'd be fine as-is. But nobody's doing that, grrr.)

[dholbert]

If you use content-distribution keyword, like "space-between" on a flexbox or grid, and the content overflows the container, it defaults to unsafely centering the content.

I think you mean space-around or space-evenly, right? (Not space-between -- that one falls back to flex-start. The other two do fall back to center though. Testcase: https://jsfiddle.net/dholbert/f1b4eo0n/

I propose that we specify that the distribution keywords that currently fall back to "center" instead fall back to "safe center".

This proposal seems reasonable to me.

[MatsPalmgren]

I don't see why safe center is generally a better fallback behavior. If it creates unscrollable overflow then sure, but that's what the magic "no value" is for, right? UAs should just implement that instead IMO. Also, it sucks to retroactively change interoperable features that's already been shipped for years by multiple UAs. We should try to avoid that unless it's obvious the feature has major issues when used in practice. I don't see any evidence of that here. For these reasons I'm opposed to this change.

FWIW, it seems like a design error to me that the overflow behavior is built-in without giving authors any way to override it. There used to be a way to specify a fallback behavior explicitly (which Gecko implemented and then had to remove 😞). I think we should re-introduce that feature (#1002). We're just waiting on the CSSWG to come up with a syntax there... We can ship that fairly quickly once we have the syntax.

[css-meeting-bot]

The CSS Working Group just discussed [css-align] Content-distribution keywords that fall back to "center" can't be made safe, and agreed to the following:

• RESOLVED: Change the fallback value for space-around and space-evenly to safe center

The full IRC log of that discussion

<dael> Topic: [css-align] Content-distribution keywords that fall back to "center" can't be made safe
<dael> github: https://github.com//issues/5088
<dael> fantasai: Some content distribution keywors like space-around that fall back to center. Fallback we chose was center not space-center and author isn't expecting overflow but it happens if screen is narrow
<dael> fantasai: Prop is switch to safe-center for these keywords instead of true center
<dael> astearns: Mats had concern in issue
<dael> fantasai: Yes. The current spec if you don't say safe or unsafe browser should fine closest scroll cotnainer and make sure it doesn't overflow. Not sure it's consistenly impl or expected for these keywords. No one is asking for center, it's jsut a fallback. Making sure we don't trigger overflow in impl without magic. It's more expected for authros to overflow to the inside when too much content.
<dael> smfr: Sounds like there's a layout dependency on scrolling?
<dael> fantasai: On scroll container
<dael> smfr: If something overflows you migth have different behavior?
<dael> fantasai: Default is if you say align-self:center and your grandparent is a scroll container and your item is bigger than viewport it shoudln't overflow left edge. Need to figure out alignment container and left edge of screen different and know you can't overflow more than that. No dependency on scroll position
<dael> smfr: Say another element later in flow causes scroll container to become a scroll container. Want to make sure it's not circular
<dael> fantasai: No
<dael> TabAtkins: The scroll cotnainers are dependent on layout
<fantasai> s/to the inside/to the end side/
<dael> iank_: Does introduce a double layout pass with arbitrary scroll container on arbitrarily large entities
<dael> TabAtkins: Yes. Sae behavior is only in parent sub-tree. This can go up to find a sub-tree
<dael> iank_: A little concerned about that
<dael> fantasai: That's separate, though. The proposal here is not to depend on that and switch to centerin without dependent on scroll container
<dael> fantasai: Currently defined to use scroll container dependent behavior. Not sure how impl
<dael> iank_: I don't think anyone impl
<dael> fantasai: Which means a lot of sies will put it in unscrollable. Proposal is to switch to safe center which doesn't depend on scrolling
<dael> TabAtkins: I know of a site currently effected by this
<dael> dholbert: People can't choose between. If we address next issue sites could say safe or unsafe and choose fallback so possible not introduce compat issues
<dael> fantasai: If authors want center they can request. This is content distribution where expect multi space elements. Single item or too many items is not what author focuses on
<dael> TabAtkins: Even if we re-add ability to spec fallback it doesn't change the default unspecified being defined here
<dael> dholbert: There might be sites that have layout where settled for true center as fallback and this changes the layout on them. in some cases change for better. Could concevably break layout
<emilio> it may be content that was intended to be unreadable though
<dael> fantasai: Unlikely to break. Majority of cases is where unreadbale content is now readable. This is all about cases with overflow and whre author didn't plan
<emilio> right, what iank_ is saying :)
<dael> iank_: webdev often put things in unscrollable and shift into view
<dael> fantasai: This is not that case. I'm not saying they don't do that, I'm saying they don't do it with space-around
<dael> astearns: And only different between center and safe-center is when content is in unscrollable
<dael> dholbert: It's just when stuff overflows
<dholbert> e.g. 50px tall flex container, 100px tall flex item
<dholbert> (far from the edges of the scrollport)
<dael> astearns: I share Mats concern that changing this on something that's been shipping for a while is bad. I like that it's fixing unreachable content. I'm not that happy making the change
<dael> TabAtkins: WE have an example of a site that's broken and will be fixed. We only have theory of sites that will be broken by change
<dael> fantasai: It's unlikely to break things but not making this change effects the user more substantially than something being slightly crooked
<dael> dholbert: Could fix by option of spec safe
<dael> fantasai: No one things about overflow when spec space-around. We have a fallback that happens to be center. If you switch between space-between and space-around you suddenly get unreachable content and you won't see that unless you have content that happens to overflow. If you see that you would fix it so you're not testing for it. User seeing it should be number 1 priority
<dael> astearns: And changing the fallback doesn't lock us from being able to specify
<dael> fantasai: If we want an opt-in to overlfow we can do that. Default should be make it readable
<florian> +1
<dael> astearns: Should we resolve to change? Anyone unhappy to resolve now?
<dael> dholbert: I'm a little uneasy without knowing what to do on next issue. not sure why we cant' tell sites to use safe keyword
<dael> fantasai: Because sites won't fix and one of our principles is avoid data loss
<dael> astearns: We can't assume people will fix things they might not even notice. It does seem like a better default.
<dael> astearns: I expect there may be compat problems since it's been shipping for a while. It's an improvement but we may be stuck
<dael> fantasai: We have compat problems with current behavior but only frustrated users have noticed
<dael> astearns: dholbert would you rather take to issue?
<dael> dholbert: I'm okay moving forward. I think we'll discover more compat or angry authors. It's hypothetical
<dael> astearns: Prop: Change the fallback value for space-around and space-evenly to safe center
<dael> astearns: Objections?
<dael> RESOLVED: Change the fallback value for space-around and space-evenly to safe center