This content originally appeared on Bram.us and was authored by Bramus!
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 in the middle of the screen, 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. 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, 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 would have initially expected). This change was resolved on at the CSSWG earlier this year.
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.
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2025-11-20T21:36:59+00:00) Anchor Positioning is transform-aware in Chrome 144+. Retrieved from https://www.scien.cx/2025/11/20/anchor-positioning-is-transform-aware-in-chrome-144/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.