[BUG] Scrolling the viewport moves popovertarget downwards if inside a container with position: sticky

[matthiasott]

Describe the bug
I am using anchor positioning to attach a popover to the button invoking it. If the popovertarget (and the anchor) are inside a sticky container, e.g. a sticky header element, the popovertarget that is positioned with anchor positioning is moving downwards instead of staying at its fixed position when the user scrolls the page.

To Reproduce
I created a video of it (see below) and a CodePen to isolate and reproduce the bug – or am I missing something?
https://codepen.io/matthiasott/pen/MYadqvp/d5423e2b4813be270a2b11339a0d9fe9

Expected behavior
The spec says that “The remembered scroll offset also [should account] for other scroll-dependent positioning changes, such as position: sticky.”
I would expect the element to stay at the same position, regardless of the scroll offset.

Screenshots
https://github.com/user-attachments/assets/20f6702c-7418-4c33-bf6b-3b9f5746d1a6

Browsers tested on
Safari on MacOS (18.3.1) and iOS (18.1.1)

Possible fix
I temporarily fixed the behavior on my site (see the dark mode toggle in the upper right on https://matthiasott.com) by using a hasStickyAncestor() function that changes the strategy from absolute to fixed in the autoUpdate function of applyAnchorPositions in polyfill.ts.
const strategy = hasStickyAncestor(wrapper) ? 'fixed' : 'absolute';
Idk if that’s the best way to do it. Let me know if I can/should send a PR with those changes for you to review.

Thank you so much for all the work that went into this polyfill! 🤗

[jamesnw]

Thanks for reporting this! We are currently always using the absolute strategy, which means it also doesn't work correctly if it's in a fixed ancestor.

Another potential way of addressing this (at least in the minimal reproduction) would be to set the popover to position: absolute. However, this adds some scroll jank.

For my notes, here's a related issue from Floating UI where they address sticky positioning in a layoutShift option (which is enabled by default, and not disabled by the polyfill).

We do need to make the strategy dynamic. I was hoping we could make this based on the position of the positioned element itself, but as you point out, that may not work in all cases. We may be able to develop a heuristic based on the positioned element's position value and its offsetParent.