Post

CSS friends! I’ve been messing around with anchor positioning and either I’m being a doofus or I’ve found a bug, and I need someone who actually knows what they’re doing to confirm which it is! Reduced test case: codepen.io/editor/jonpear… #help

(tl;dr: when using `justify-self` on a popover, Firefox seems to treat any values as ‘start’. I am perfectly willing to accept that I’m misunderstanding the spec somewhere…)

This has to do with safe vs unsafe alignment, in which Chrome (and Safari) are doing the unsafe version and Firefox is doing the safe one. www.w3.org/TR/css-align... If your anchor was all the way to the left edge, with unsafe alignment your positioned element could bleed out of the page.

Attached is a demo using a WIP DevTools extension I built to help debug this type of stuff, so you can see what Chrome does. The IMCB is the green area underneath the button, and inside it you then justify the positioned element (in an unsafe manner).

If you were to change the value to `safe end`, you can see that it gets interpreted as `start` when the button is smaller than the popover. When the button becomes wider than the positioned element (e.g. by edition its text) the `end` justification gets used.

New day, fresh look: I think Chrome/Safari are correct here, based on drafts.csswg.org/css-align-3/... Bullet 2 applies: the alignment subject doesn’t fit within the IMCB but it does fit within the overflow limit rect and it can be aligned without overflowing that overflow limit rect.