v144 · css

CSS anchor positioning with transforms

When an anchor-positioned element is tethered against an anchor that has a transform (or is contained by something with a transform), resolve anchor() and anchor-size() functions against the bounding box of the transformed anchor.

concepts

  1. Transformed Anchor

    Anchor positioning now respects CSS transforms on the anchor element. Pop the popover relative to a rotated target without doing the matrix math yourself.

  2. Orbit Tracker

    An animated, rotating anchor with a label that tracks it at 60fps using only CSS. Before Chrome 144 the label sat at the un-transformed origin.

  3. Scale Nest

    The harder case: transforms inherited from an ancestor. Drive container scale and rotation, see the tooltip stay glued in v144 vs. drifting in the pre-144 fallback.

  4. Matrix Playground

    Apply any combination of translate, rotate, scale, and skew via sliders. The Chrome 144 tooltip tracks the post-transform visual position; a second label shows where pre-144 would incorrectly place it — at the un-transformed layout origin.

  5. Chart Tooltip

    A bar chart inside a CSS-transformed container. Each bar has an anchor-name; hovering shows a tooltip positioned with bottom: calc(anchor(top) + 8px). Drag the scale, rotate, and translate sliders — in Chrome 144+ anchor() resolves against the visual post-transform position so the tooltip stays glued to its bar, not the layout origin.

why it shipped

https://drafts.csswg.org/css-anchor-position-1/#anchor-position-size says that transform effects on an anchor should affect the anchor box, so that anchor-positioned elements may be positioned with regards to where an anchor is on screen. This chimes well with how scroll offsets are also taken into account. https://drafts.csswg.org/css-anchor-position-1/#scroll

references