← Back to release summary

CSS anchor positioning with transforms

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

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.

Motivation

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 This behavior is crucial for creating sophisticated UI effects where elements need to remain logically connected while one of them is being transformed. Consider a tooltip that points to a button. If the button rotates or scales on hover, you want the tooltip to move along with it, maintaining its relative position.

Standards & signals

View on chromestatus.com