CSS anchor positioning with transforms

[mstensho]

WebKittens

No response

Title of the proposal

CSS Anchor Positioning with transforms

URL to the spec

https://drafts.csswg.org/css-anchor-position-1/#anchor-position-size

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

No response

TAG Design Review URL

No response

Mozilla standards-positions issue URL

mozilla/standards-positions#1302

WebKit Bugzilla URL

No response

Radar URL

No response

Description

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.

See https://chromestatus.com/feature/5201048700583936

[yisibl]

Here's a demo showcasing this feature. In the latest version of Chrome, you can see the progress number follow the input's thumb.

This is a great complement to CSS anchors.

https://codepen.io/yisi/pen/eYaJopE