[csswg-drafts] [css-posotion] Browsers treat auto margins as 0 when resolving sticky insets (#12852)

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

== [css-posotion] Browsers treat auto margins as 0 when resolving sticky insets ==
https://drafts.csswg.org/css-position/#position-box

> 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

Also, Gecko, Blink and WebKit agree that if the computed margin is `auto`, then zero is used instead of the margin.

This is a round-tripping violation!

```html
<!DOCTYPE html>
<div style="overflow: hidden; width: 100px; height: 100px; background: red">
  <div style="width: 500px">
    <div id="sticky" style="position: sticky; right: 0; width: 100px; height: 100px; margin-left: auto; background: green;"></div>
  </div>
</div>
<button>Click me</button>
<script>
document.querySelector("button").addEventListener("click", () => {
  sticky.style.marginLeft = getComputedStyle(sticky).marginLeft;

  // Workaround for lack of invalidation in Blink
  sticky.style.display = "none";
  document.body.offsetLeft;
  sticky.style.display = "";
});
</script>
```


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


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

Received on Wednesday, 24 September 2025 21:24:28 UTC