oddbird / oddbird/css-anchor-positioning
[BUG] Scrolling the viewport moves popovertarget downwards if inside a container with position: sticky
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 493
- Forks
- 18
- Avg merge
- 12h 37m
- Merged PRs (30d)
- 5
Description
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! 🤗
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in polyfill.ts at applyAnchorPositions and its autoUpdate function, then reproduce the issue with the linked CodePen using a sticky container and scrolling. Review the reported hasStickyAncestor strategy change and verify that the anchored popover remains at the expected position while scrolling, without regressing non-sticky cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100