On January 13, 2026 Firefox 147 will be released, which means all stable versions of browser engines will support CSS anchor positioning. Therefore I gave it a try and was happily surprised how easy the API is and how quickly I could implement the layouts I had in mind.
At least until I tested my creation in Safari, which again spoiled the fun: I wanted to implement a tooltip, which was quickly done with the new API and it worked in all browser engines. But I also wanted to add an arrow to the tooltip and thought this is another great use case for anchor positioning.
Turns out Safari doesn’t seem to support nested CSS anchors. So anchoring an element on an anchored element just breaks. The first anchor for the tooltip works, but the tooltip’s arrow never ends up, where it’s supposed to be. It works in Chromium’s and Gecko’s implementation, but not in WebKit.
Until WebKit gets recursive anchor positioning right, I warn you not to nest CSS anchors in your own projects.