[csswg-drafts] [css-scroll-snap] Scroll areas for fragmented boxes (like in css-multicol) (#5911)

cartr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scroll-snap] Scroll areas for fragmented boxes (like in css-multicol) ==
Where does the scroll snap position go when you set `scroll-snap-align` on a block that's fragmented across multiple columns? (Here is [a demo that attempts to do this](https://jsfiddle.net/ejvmazb7/). The goal was to create behavior similar to an e-book reader application, where text is flowed into columns that the user can swipe between.)

[The CSS Scroll Snap Module](https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin) says (emphasis mine):

> Values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the **transformed border box**, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

However, [the CSS Fragmentation Module](https://drafts.csswg.org/css-break-4/#transforms) appears to suggest that you can't apply transforms to a box, you have to apply transforms to each fragment of the box separately:

> Fragmentation interacts with layout, and thus occurs before relative positioning [CSS2], transforms [CSS-TRANSFORMS-1], and any other graphical effects. Such effects are applied per fragment: for example, rotation applied to a fragmented box will calculate a rotation origin for each fragment and independently rotate that fragment around its origin.

[My demo](https://jsfiddle.net/ejvmazb7/) actually behaves differently in different browsers. Firefox creates multiple scroll snap positions, one for each fragment. Safari picks a column near the middle and places a single scroll snap position aligned to that column.

So it's not completely clear what's supposed to happen in this situation, and it would be nice if it was specified more clearly.

Personally, I think Firefox's behavior is the best here, mostly because it lets me do the e-book reader thing. I could also see an approach where you draw a bounding box around all the fragments to create a single scroll snap area. Safari's behavior doesn't make much sense to me so I don't think it should be written into the specification.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5911 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 31 January 2021 11:09:34 UTC