Intent to Ship: CSS anchor positioning with transforms

[Morten Stenshorne]

Contact emails

mste...@chromium.org

Explainer

No information provided

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

No information provided

TAG review

No information provided

TAG review status

Pending

Risks

Interoperability and Compatibility

No information provided

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?

No information provided

Debuggability

No information provided

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

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

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

Flag name on about://flags

No information provided

Finch feature name

CSSAnchorWithTransforms

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

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

Estimated milestones

Shipping on desktop	144
Shipping on Android	144
Shipping on WebView	144

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

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

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKWZFm6cenwaNiH0YEpJae2n%3DfWz7O553%3D9fKSukBL_KhvUK0A%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

[Philip Jägenstedt]

LGTM1

There is some discussion in https://github.com/mozilla/standards-positions/issues/1302 about whether this feature triggers more layouts, which it does not IIUC. But if there is more feedback from Mozilla on this and some changes are needed for Gecko to avoid extra layout work, we should adjust the spec and implementation as needed.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKWZFm7qjp6xQ2TX2jSFaXszEZnyBSKA-DSddU4B2P4mKLU4GQ%40mail.gmail.com.

[Chris Harrelson]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYdb6iroDcWtbBDUNPoTF8aPQ24%3D8tex2_L%3DUPJVMDBhLg%40mail.gmail.com.

[Mike Taylor]

LGTM3

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw_GDLR2%2B9CK0VAw6AOEN_EtDDB5PYyzFjQE1MMZP8y%2BeA%40mail.gmail.com.

[Emilio Cobos Álvarez]

It does not at the expense of correctness AIUI. That doesn't seem a
great trade-off?

-- Emilio

On 10/28/25 6:44 PM, Philip Jägenstedt wrote:
> LGTM1
>
> There is some discussion in https://github.com/mozilla/standards-

> positions/issues/1302 <https://github.com/mozilla/standards-positions/
> issues/1302> about whether this feature triggers more layouts, which it

> does not IIUC. But if there is more feedback from Mozilla on this and
> some changes are needed for Gecko to avoid extra layout work, we should
> adjust the spec and implementation as needed.
>
> On Thu, Oct 23, 2025 at 8:16 AM Morten Stenshorne <mste...@chromium.org

> <mailto:mste...@chromium.org>> wrote:
>
> *Contact emails*
> mste...@chromium.org <mailto:mste...@chromium.org>
>
> *Explainer*
> /No information provided/
>
> *Specification*
> https://drafts.csswg.org/css-anchor-position-1/#anchor-position-size
> <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 <https://issues.chromium.org/issues?
> q=customfield1222907:%22Blink%3ELayout%22>
>
> *Web Feature ID*
> anchor-positioning <https://webstatus.dev/features/anchor-positioning>
>
> *Motivation*
> https://drafts.csswg.org/css-anchor-position-1/#anchor-position-size
> <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 <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*
> /No information provided/
>
> *TAG review*
> /No information provided/
>
> *TAG review status*
> Pending
>
> *Risks*
>
>
> *Interoperability and Compatibility*
> /No information provided/
>
> /Gecko/: No signal (https://github.com/mozilla/standards-positions/
> issues/1302 <https://github.com/mozilla/standards-positions/
> issues/1302>)
>
> /WebKit/: No signal (https://github.com/WebKit/standards-positions/
> issues/558 <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?
>

> /No information provided/
>
>
> *Debuggability*
> /No information provided/
>
> *Will this feature be supported on all six Blink platforms (Windows,
> Mac, Linux, ChromeOS, Android, and Android WebView)?*
> Yes
>
> *Is this feature fully tested by web-platform-tests <https://
> chromium.googlesource.com/chromium/src/+/main/docs/testing/
> web_platform_tests.md>?*
> Yes
> https://wpt.fyi/results/css/css-anchor-position?
> label=master&label=experimental&aligned <https://wpt.fyi/results/
> css/css-anchor-position?label=master&label=experimental&aligned>
>
> *Flag name on about://flags*
> /No information provided/
>
> *Finch feature name*
> CSSAnchorWithTransforms
>
> *Rollout plan*

> Will ship enabled for all users
>

> *Requires code in //chrome?*
> False
>
> *Tracking bug*
> https://issues.chromium.org/issues/382294252 <https://
> issues.chromium.org/issues/382294252>
>
> *Estimated milestones*

> Shipping on desktop 144
> Shipping on Android 144
> Shipping on WebView 144
>
>
>

> *Anticipated spec changes*

>
> Open questions about a feature may be a source of future web compat
> or interop issues. Please list open issues (e.g. links to known
> github issues in the project for the feature specification) whose
> resolution may introduce web compat/interop risk (e.g., changing to
> naming or structure of the API in a non-backward-compatible way).
>

> /No information provided/
>
> *Link to entry on the Chrome Platform Status*
> https://chromestatus.com/feature/5201048700583936?
> gate=5152239350054912 <https://chromestatus.com/
> feature/5201048700583936?gate=5152239350054912>
>
> *Links to previous Intent discussions*
> Intent to Prototype: https://groups.google.com/a/chromium.org/d/
> msgid/blink-dev/
> CAKWZFm6cenwaNiH0YEpJae2n%3DfWz7O553%3D9fKSukBL_KhvUK0A%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKWZFm6cenwaNiH0YEpJae2n%3DfWz7O553%3D9fKSukBL_KhvUK0A%40mail.gmail.com>

>
>
> This intent message was generated by Chrome Platform Status

> <https://chromestatus.com/>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it,

> send an email to blink-dev+...@chromium.org <mailto:blink-
> dev+uns...@chromium.org>.

> To view this discussion visit https://groups.google.com/a/
> chromium.org/d/msgid/blink-dev/CAKWZFm7qjp6xQ2TX2jSFaXszEZnyBSKA-

> DSddU4B2P4mKLU4GQ%40mail.gmail.com <https://groups.google.com/a/
> chromium.org/d/msgid/blink-dev/CAKWZFm7qjp6xQ2TX2jSFaXszEZnyBSKA-
> DSddU4B2P4mKLU4GQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send

> an email to blink-dev+...@chromium.org <mailto:blink-
> dev+uns...@chromium.org>.

> To view this discussion visit https://groups.google.com/a/chromium.org/
> d/msgid/blink-dev/

> CAARdPYdb6iroDcWtbBDUNPoTF8aPQ24%3D8tex2_L%3DUPJVMDBhLg%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/
> CAARdPYdb6iroDcWtbBDUNPoTF8aPQ24%3D8tex2_L%3DUPJVMDBhLg%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[Morten Stenshorne]

Just to be clear: anchored elements *will* respond to transform changes
on the anchor, and be re-laid out if necessary, but during animations,
layout may "lag behind", as laying out synchronously would prevent the
animation from running on the compositor thread.

--
Morten Stenshorne, Software developer,
Blink/Layout, Google, Oslo, Norway