Intent to Prototype: CSS anchor positioning with transforms

[Morten Stenshorne]

Contact emails

mste...@chromium.org

Explainer

None

Specification

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

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.

Blink component

Blink>Layout

Web Feature ID

anchor-positioning

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.

Initial public proposal

None

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1302)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/558)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Is this feature fully tested by web-platform-tests?

Yeshttps://wpt.fyi/results/css/css-anchor-position?label=master&label=experimental&aligned

Flag name on about://flags

None

Finch feature name

CSSAnchorWithTransforms

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/382294252

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5201048700583936?gate=5190730712743936

This intent message was generated by Chrome Platform Status.