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).

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.