demo · v135
Anchor flip counter
Every time a positioned popover changes sides — above ↔ below — because of a scroll, that counts as a "flip". This demo counts those events in real time. Toggle the Chrome 135 CSS anchor path and watch the flip tally drop.
Scroll down to move the anchor element through the viewport boundary.
The popover starts above its anchor. As you scroll, the anchor approaches the top of the visible area. Without the CSS remembered-offset path, the popover flips to below and back again as you scroll, causing a jarring jump.
Midpoint — anchor is here:
With CSS anchor positioning and position-try-order: most-height, the browser uses the anchor's remembered scroll offset and a stable fallback order, reducing the flip rate.
Scroll further to see the popover eventually settle once the anchor fully leaves the viewport.
— end of scrollable content —
Event log:
No events yet — scroll the box above.
how the counter works
On each scroll event the demo calls getBoundingClientRect() on both the anchor and the popover, then compares popRect.bottom to anchorRect.top. If the popover's bottom edge is above the anchor's top edge the popover is above; otherwise it's below. When that classification changes between frames, a flip is recorded.
Chrome 135's remembered scroll offset lets anchor-positioned UI compensate from the scroll offset used when the anchored element was laid out. The demo pairs that with position-try-order: most-height so the fallback with the most available space is preferred.