v150 · CSS · Feature Detection

Anchor-position Feature Flag

@supports named-feature(anchor-position-follows-transforms) is the first real-world named feature defined by the spec. Test it in this browser, see what it means for anchor-positioned elements, and compare CSS vs JavaScript probing.

named-feature(anchor-position-follows-transforms): checking…

✓ This browser supports anchor-position-follows-transforms — anchor-positioned elements track their anchors through CSS transforms.

✗ This browser does not report anchor-position-follows-transforms support (or @supports named-feature() itself is not supported).

CSS.supports("named-feature(anchor-position-follows-transforms)")
—
@supports named-feature(…) rule match
—
Anchor positioning primitives
—

move the anchored target

Press move to transform the blue anchor. In browsers that support transform-aware anchor positioning, the popover remains centered below the anchor; without that named feature, the readout exposes any drift between the transformed anchor box and the positioned popover.

CSS anchor positioning stage
anchor
anchored popover
Measuring anchor and popover geometry… 
/* CSS approach */
@supports named-feature(anchor-position-follows-transforms) {
  /* Enhanced: use transform-aware anchor positioning */
  .tooltip {
    position-anchor: --my-anchor;
    top: anchor(bottom);
    /* this will track correctly through transforms */
  }
}

/* JavaScript approach */
const supported = CSS.supports(
  'named-feature(anchor-position-follows-transforms)'
);

if (supported) {
  /* opt into transform-tracking anchor layout */
}

what this feature means

anchor-position-follows-transforms is a named feature flag indicating whether this browser's anchor-positioning implementation correctly tracks anchor elements through CSS transform and will-change: transform changes. Without this support, an anchor-positioned tooltip may drift away from its anchor when the anchor is transformed (e.g. animated via CSS). With support, the positioned element recomputes its coordinates after transforms are applied, so the tooltip stays glued to its anchor regardless of animation.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗