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.

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.

All that said, I am not sure which one is correct here, but I’d lean towards Chrome’s behavior. Perhaps @jakearchibald.com has input?

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.