oddbird / oddbird/css-anchor-positioning

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

Open
#350 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.