demo · v144

Scale Nest

An anchor doesn't have to be transformed itself — it can inherit transforms from an ancestor. v144 fixes the harder case: anchor() resolves against the on-screen box even when the transform is several elements up the tree. Zoom the container and watch the tooltip stay glued.

anchor-name: checking…

Chrome 144+ — tooltip tracks the transformed anchor box

anchor
label tracks the scaled box

Pre-144 fallback (computed) — tooltip pinned to the untransformed origin

anchor
label pinned to origin

the API

.container { transform: scale(var(--zoom)); }   /* transform on the ancestor */
.anchor    { anchor-name: --pin; }
.tooltip   {
  position-anchor: --pin;
  top: anchor(bottom);          /* resolved against the *rendered* box */
  left: anchor(center);
}

see also