demo · v135

Side-by-side: with vs. without remembered offset

The bug report that drove this feature: anchored popovers near a scroll edge could jump when scrolling changed the anchor's offset. Two identical scroll boxes — the left simulates legacy per-scroll retargeting, while the right uses CSS anchor positioning, remembered scroll offset, and position-try-order: most-height.

anchor positioning: ? fallback order: ?

without remembered offset (legacy)

anchor
popover

with remembered scroll offset (Chrome 135+)

anchor
popover

Scroll both boxes through the anchor or use replay. The right panel keeps the anchored element tied to the remembered scroll offset; the left panel demonstrates the retargeting behaviour authors used to script around.

the code

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

see also