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

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.