demo · v135

Scroll. Watch the popover stay put.

Anchor-positioned popovers used to flicker as the user scrolled — every frame, the engine would re-pick the best fallback. Chrome 135 remembers the position the popover was opened at, so it stays anchored even when the scroll offset pushes the anchor near an edge.

anchor positioning: ? fallback order: ?
anchor
popover (flips when crowded)

Scroll the box up and down. With CSS anchor positioning, Chrome 135 compensates for the anchor's remembered scroll offset. Toggle off to switch to a JS fallback that repositions from getBoundingClientRect() on every scroll.

the code

#popover {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  position-try-fallbacks: --flip-top;
  position-try-order: most-height;
}

see also