demo · v135
Synced scroll replay
Hit Replay and watch the two panels scroll in lockstep. The left panel simulates legacy per-scroll retargeting — the popover flickers between “below” and “above” as the anchor crosses the viewport edge. The right panel uses CSS anchor positioning, remembered scroll offset, and position-try-order: most-height.
Press Replay to start the scripted scroll. Flicker events appear here.
why this matters
Without the Chrome 135 remembered-scroll-offset behaviour, authors often simulated placement in JavaScript and re-evaluated the best fitting position on every scroll frame. At the flip point the popover jumps: below the anchor one frame, above it the next. With CSS anchor positioning, the engine compensates from the remembered scroll offset and orders fallbacks with position-try-order: most-height.
/* Chrome 135+ — remembered offset */
.popover {
position: absolute;
position-anchor: --anchor;
top: anchor(bottom);
position-try-fallbacks: --flip-above;
position-try-order: most-height;
}