[css-align-3] Default safety of scroll containers

[fantasai]

In #8992 we decided to make the default safety of block containers as safe, to help avoid inadvertent clipping.

But for scrollable block containers, this isn't a concern since align-content also changes how the scrollable overflow area is clipped.

So I'm wondering if we should make the default alignment unsafe for scroll containers... or keep it consistent with non-scrollable block boxes. It feels weird to have to write align-content: unsafe end when it's not actually unsafe!

demo that doesn't actually work atm...

[fantasai]

We did discuss scroll containers being an exception here in #8992 actually; but it wasn't clear in the resolution... I have currently edited them in as an exception (use “unsafe” alignment because it isn't unsafe) but Agenda+ to check with the WG.

[css-meeting-bot]

The CSS Working Group just discussed [css-align-3] Default safety of scroll containers, and agreed to the following:

• RESOLVED: all scroll containers default to unsafe alignment (not actually unsafe on scroll container)

The full IRC log of that discussion

<keithamus> fantasai: previous issue; when we have alingment applied to block, if the content is bigger than box it overflows. For flex/grid containers we overflow in whatever direction
<keithamus> fantasai: we can specify to always overflow to end of container, so not clipped by scrollbars
<keithamus> fantasai: content alignment on block containers we decided to do safe alignment by default. reduce compat impact.
<keithamus> fantasai: block container thats scroll container has no safety concerns around accidental clip because ... it'll overflow
<keithamus> fantasai: if I set align-content: end on scroll container should it end align content so you scroll to end of the content? Or should we layout same way a non-scroll or block container where its aligned to start and overflows toward ends
<fantasai> https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20style%3D%22align-content%3A%20end%22%3E%0A%20%20Line%201%3Cbr%3ELine%202%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22align-content%3A%20end%22%3E%0A%20%20Line%201%3Cbr%3ELine%202%3Cbr%3ELine%203%3Cbr%3ELine%204%3Cbr%3ELine%205%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22align-content%3A%20end%3B%20overflow%3A%20auto%22%3E%0A%20%20Line%201%3
<keithamus> fantasai: made demo
<fantasai> Cbr%3ELine%202%3Cbr%3ELine%203%3Cbr%3ELine%204%3Cbr%3ELine%205%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22align-content%3A%20unsafe%20end%22%3E%0A%20%20Line%201%3Cbr%3ELine%202%3Cbr%3ELine%203%3Cbr%3ELine%204%3Cbr%3ELine%205%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22align-content%3A%20unsafe%20end%3B%20overflow%3A%20auto%22%3E%0A%20%20Line%201%3Cbr%3ELine%202%3Cbr%3ELine%203%3Cbr%3ELine%204%3Cbr%3ELine%205%3C%2Fdiv%3E%0A%0A%
<fantasai> 3Cstyle%3E%0A%20%20body%20%7B%20display%3A%20flex%3B%20height%3A%205em%3B%20%7D%0A%20%20div%20%7B%20margin%3A%200.5em%3B%20border%3A%20solid%3B%20%7D%0A%20%20div%3Ahover%3A%3Abefore%20%7B%0A%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20top%3A%200%3B%20left%3A%200%3B%0A%20%20%20%20%20content%3A%20attr(style)%3B%0A%20%20%20%20%20background%3A%20Canvas%3B%0A%20%20%7D%0A%3Cstyle%3E
<fantasai> https://software.hixie.ch/utilities/js/live-dom-viewer/saved/12505
<keithamus> iank_: which side is scroll origin on in align end case?
<keithamus> fantasai: align-content: unsafe-end content will overflow to top and initial scroll position will scroll to bottom so you can scroll upward
<keithamus> iank_: so scroll origin at end
<keithamus> fantasai: so if I set align-content: end instead of unsafe-end do we want it like unsafe-end or layout like top aligned if content overflows
<keithamus> fantasai: thats what happens if you're not a scroll container
<keithamus> iank_: implications that safe-end scroll origin at top vs unsafe-end scroll origin at bottom
<keithamus> fantasai: right. what should default be?
<keithamus> fantasai: playing around I thought it was more convenient to say align-content; end makes scroll container end
<keithamus> fantasai: but can see consistency argument. to layout as non scrolling.
<keithamus> fantasai: no overflow in those cases. Might look bad. Inclination when making demos is not requiring unsafe keyword felt more natural.
<keithamus> iank_: that would mean you couldnt... how would you get it to start from bottom and scroll up? Unsafe end?
<keithamus> fantasai: safe end content would overflow toward bottom, scroll to top. unsafe end content overlflows to top and you scroll to bottom. If you dont specify safe/unsafe what happens?
<keithamus> fantasai: we can be consistent with flex/grid, or block which is safe-end
<kizu> q+
<keithamus> fantasai: want to avoid stuff in an unreachable region. On scroll container itself you dont have that problem
<keithamus> iank_: weak preference align-content: end starts at bottom and scrolls upward. For consistency with flexbox. Folks know flexbox works that way. Might not be webcompat
<rachelandrew> +1
<astearns> ack kizu
<keithamus> kizu: ideally Id like to see safe... author intent wont always mean we want to see bottom of scroll container
<keithamus> kizu: for block level we might want to think about if we want safe in css in general. Might be a good idea. Container which could have title, paragraph, if not enough content user will see header always, if unsafe as we add paragraphs it'll shift in which we wont see header.
<keithamus> kizu: safe is better than to assign position offset.
<keithamus> kizu: recently I think there was an article about align-content end in flex aligns to bottom, changing scroll origin
<keithamus> kizu: this was news for a lot of authors. People don't expect this behavior. top of box is always at top. flex is IMO not the same but webcompat default. Safe way for doing for block I'm for it, not strongly.
<astearns> ack fantasai
<keithamus> fantasai: want to point out flex already works this way. there has been bugs in impls which means content got clipped. Not been usable behavior until recently.
<keithamus> fantasai: Id like to hear from authors in group. align content end starts scroll at bottom?
<keithamus> fantasai: not overflow in that direction
<keithamus> fantasai: consistency arguments in both directions. Scroll containers in flexbox and grid scroll to bottom with align-content: end
<keithamus> fantasai: block contains, which aren't scroll container, align-content: start
<keithamus> fantasai: from authoring it might make more sense to be complicit with grid/flex.
<keithamus> fantasai: safety aspect - its not unsafe to start scroll container at bottom
<keithamus> fantasai: recently introduced alignment safety for unreachable content. Not a problem here.
<keithamus> fantasai: if you want the other behavior you can get it by specifying safe
<keithamus> iank_: IME align-content: end in flexbox is super useful. One reason to explicitly use flexbox. I'd lean to cosnsistency there
<keithamus> astearns: kizu disagreeing? People mention the behavior is unexpected?
<keithamus> kizu: to clarify not unexpected in a bad way. A feature they didn't know they could use. I'm okay with fantasai's resolution.
<dbaron> I find it a little weird that "safe" undoes an alignment that isn't actually unsafe.
<keithamus> iank_: when I talk to developers they say its amazing
<keithamus> dbaron: if you explicitly write safe it undoes something which wasnt unsafe? Consistency in what safe means might be valuable
<keithamus> fantasai: I dont think we should change explicit keyword behavior
<keithamus> fantasai: we might want to allow explicit direction when not overflowing. dont have that feature yet
<keithamus> PROPOSED RESOLUTION: all scroll containers default to unsafe alignment (not actually unsafe on scroll container)
<keithamus> PROPOSED RESOLUTION: all scroll containers default to unsafe alignment (not actually unsafe on scroll container)
<keithamus> dholbert: its not unsafe if it runs off direction if scrolling is able to move but what if it runs off in both directions?
<keithamus> dholbert: or offset by 100px to start side or whatever
<keithamus> fantasai: that would be clipped anyway
<keithamus> fantasai: the spec requires scroll up and down. you have to scroll to a position to align the subject within the container in both start and end so you can see entire alignment
<lea> (just realized I never did)
<keithamus> fantasai: if you position outside of alignment object it'll be off
<keithamus> RESOLVED: all scroll containers default to unsafe alignment (not actually unsafe on scroll container)
<keithamus> fantasai: in draft. just wanted confirmation
<keithamus> fantasai: will upload wpts