v157 · css · anchor positioning

position-visibility: anchor-valid

An anchor-positioned element whose anchor has disappeared — removed from the DOM, display: none, or no longer an acceptable anchor element — is left floating with nothing to point at. position-visibility: anchor-valid hides it instead. The value was first implemented as anchors-valid, then reverted while the CSSWG settled what “valid” meant; it now considers only the default anchor, which is what makes it implementable.

concepts

  1. Validity probe

    Run a live CSS.supports() and declaration-retention probe across every position-visibility value, then apply each one to a real anchored tooltip and read back the computed value. Shows exactly which values this browser parses and which it silently drops.

  2. Default-anchor semantics

    Why the value was reverted and renamed. Remove the default anchor, or one of several referenced anchors, and see which removals anchor-valid is defined to react to — the resolution that narrowed it from “all anchors” to “the default anchor”.

  3. Working fallback today

    The value is not in any shipping browser, so this is the explicitly-labelled script fallback that achieves the same effect with MutationObserver and an isConnected check — plus what you delete once the native value lands.

what shipped, what did not

anchors-valid was implemented under crbug.com/329703412 and then reverted. The problem was the definition: an anchor-positioned element can reference several anchors — one via position-anchor, others via anchor() in individual inset properties. If any of them becoming invalid hides the element, the behaviour is both expensive to compute and surprising to author.

The CSSWG resolved to consider only the default anchor — the one position-anchor names — and renamed the value to the singular anchor-valid to match anchor-visible. That renaming is tracked separately as Ship anchor-visible and anchor-valid.

the API

.tooltip {
  position: absolute;
  position-anchor: --trigger;   /* the DEFAULT anchor */
  position-area: block-end;

  /* Hide me if --trigger stops being a usable anchor. Other anchors
     referenced by anchor() in inset properties are NOT considered. */
  position-visibility: anchor-valid;
}

The full value set is always (never hide), anchor-visible (hide when the default anchor is scrolled out of view or clipped), anchor-valid (hide when the default anchor is no longer a valid anchor at all), and no-overflow (hide when the positioned element itself would overflow its containing block). They compose: position-visibility: anchor-valid anchor-visible hides on either condition.

references