[csswg-drafts] [css-position-3] Sticky position and margins (should margins be considered at all?). (#9052)

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

== [css-position-3] Sticky position and margins (should margins be considered at all?). ==
https://drafts.csswg.org/css-position-3/#stickypos-insets

> For each side of the box, if the corresponding [inset property](https://drafts.csswg.org/css-position-3/#inset-properties) is not [auto](https://drafts.csswg.org/css-position-3/#valdef-top-auto), and the corresponding [border edge](https://drafts.csswg.org/css-box-4/#border-edge) of the box would be outside the corresponding edge of the [sticky view rectangle](https://drafts.csswg.org/css-position-3/#sticky-view-rectangle), then the box must be visually shifted ([as for relative positioning](https://drafts.csswg.org/css-position-3/#relpos-insets)) to be inward of that sticky view rectangle edge, insofar as it can while its [position box](https://drafts.csswg.org/css-position-3/#position-box) remains contained within its [containing block](https://drafts.csswg.org/css-display-4/#containing-block). The position box is its [margin box](https://drafts.csswg.org/css-box-4/#margin-box), except that for any side for which the distance between its [margin edge](https://drafts.csswg.org/css-box-4/#margin-edge) and the corresponding edge of its containing block is less than its corresponding [margin](https://drafts.csswg.org/css-box-4/#margin), that distance is used in place of that margin.

The spec and implementations are currently a little scattered when it comes to how margins should be treated for sticky-pos elements. It's not clear if all the interactions have been thought through completely.

1. Implementations (and the spec I think?) currently use border-box rect to determine if something is overconstrained (e.g. `position: sticky; left: 100px; right: 100px;`.  Is this intentional/correct?

2. Implementations currently differ on if auto-margins should be considered. For example: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=11848
```
<!DOCTYPE html>
<div style="overflow: scroll; width: 100px; height: 100px;">
  <div style="margin: 20px; border: solid; width: 100px; height: 100px;">
    <div style="position: sticky; left: 0; width: 10px; height: 10px; margin-right: auto; background: lime;"></div>
  </div>
</div>
```

Per-spec Firefox is currently correct - however this might be surprising to web-developers as it'll effectively opt-out the element being sticky by default if they are just using auto-margins to center content.

3. Unclear from the spec how collapsing margins should be considered in the calculations above. Currently no implementations appear to look at collapsing margins.

4. The sticky view rectangle is currently defined as the border-box which seems to match what web-developers would expect. E.g. you don't expect the sticky-element to stick based on some unseen margin. Do the margins in the rest of the calculation add create more confusion than value? E.g. margins are often used for aligning content, if you use margins in this way and then make the element sticky-pos then it'll likely have un-expected behaviour (see auto-margins above as one example).

TL;DR Should the "position box" just be the border-box instead? (rather than the margin-box).   

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


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

Received on Monday, 10 July 2023 20:23:58 UTC