https://drafts.csswg.org/css-anchor-position-1/#anchor-position-size has this:
> Transforms are often optimized onto a different thread, so > transform-based updates to an anchor box’s position may be delayed by > a few frames. "A few frames" is a bit vague, but maybe there's no way around that. Chrome's current implementation doesn't do anything special at all to sync layout in response to animated transformed anchors - all we currently guarantee is that layout is correct at the end of the animation (a very liberal interpretation of "delayed by a few frames"). I'm working on improving that, so that layout will typically be at most a frame or two behind the animated transform. This is achieved by detecting when a transform animation that affects the bounding box of an anchor is ongoing, AND that there are actually anchor() or anchor-size() functions depending on it at the same time. When this is the case, we'll require a main thread sync for each animation. This should be sufficiently correct, and never hurt performance when no such anchor transform animation is ongoing. Morten Stenshorne <[email protected]> writes: > 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. > > 'Emilio Cobos Álvarez' via blink-dev <[email protected]> writes: > >> 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 <[email protected] >>> <mailto:[email protected]>> wrote: >>> *Contact emails* >>> [email protected] <mailto:[email protected]> >>> *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 [email protected] <mailto:blink- >>> [email protected]>. >>> 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 [email protected] <mailto:blink- >>> [email protected]>. >>> 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, Software developer, Blink/Layout, Google, Oslo, Norway -- 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 [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ozzijyzwr6tx.fsf%40nusse.osl.corp.google.com.
