Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed anchor.
Here’s a demo with two anchors. They both are positioned exactly in the middle of the page, but one of them is moved and scaled using a CSS transform.
Before Chrome 144, the tooltip on the right would appear above the anchor on the left. Huh?! This is because that’s where the anchor originally was, before it was transformed. Anchor positioning in Chrome prior to Chrome 144 used the untransformed bounding box to do its thing.
From Chrome 144, following a CSSWG resolution to change the spec, the tooltip on the right now considers the transformed bounding box when anchoring itself to the anchor, so it will end up above the anchor on the right (as you might have initially expected).
Here’s a screenshot taken in Chrome 144:
~
🔥 Like what you see? Want to stay in the loop? Here's how:
I can also be found on 𝕏 Twitter and 🐘 Mastodon but only post there sporadically.