bug(aria): overlay panel jitters/lags on Y axis when scrolling the page while open (select, menu, listbox, etc.)
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
Not sure, could not confirm if this was already present in Angular 21, since it's unclear whether @angular/aria was already used/present at that version
### Description
When an overlay panel from @angular/aria is open (e.g. a select dropdown, a menu, or any other @angular/aria primitive that renders an overlay panel positioned relative to a trigger element), and the user scrolls the underlying page from bottom to top while keeping the overlay open, the panel fails to stay visually attached to its trigger/origin element on the Y axis. Instead of tracking the trigger smoothly, the panel appears to "shake" or lag behind, producing a jittery/sliding effect instead of staying cleanly pinned to its anchor.
This is reproducible directly on the official Angular Material/Aria documentation site (Angular v22 docs), e.g. on the select (aria) demo, so it does not require a custom StackBlitz repro to observe — though a StackBlitz reproduction will be added for completeness.
### Reproduction
1. Go to an Angular Aria demo page that uses an overlay-based primitive (e.g. select) on the Angular v22 docs, e.g.
https://angular.dev/guide/aria/menu#example-1
2. Click the trigger to open the overlay panel (dropdown/menu/etc.).
3. While the overlay remains open, scroll the underlying page from bottom to top (mouse wheel, trackpad, or scrollbar) — do not close the overlay.
4. Observe the overlay panel's position on the Y axis while scrolling.
### Expected Behavior
The @angular/aria overlay panel should stay perfectly attached/aligned to its origin trigger element on the Y axis throughout the scroll, repositioning smoothly and immediately as the trigger's position changes, with no visible lag or jitter.
### Actual Behavior
The overlay panel lags behind the scroll position and "shakes"/slides in a jittery manner on the Y axis instead of staying cleanly attached to its origin element. This happens specifically when scrolling from bottom to top while the @angular/aria overlay (select, menu, etc.) is open.
### Environment
- Angular: 22.0.7
- CDK/Material: 22.0.5 (@angular/cdk 22.0.5, @angular/aria 22.0.5)
- Browser(s): Chrome
- Operating System: Windows
Contributor guide
Research direction
Reproduce the jitter on the Angular Aria menu example at https://angular.dev/guide/aria/menu#example-1 using the stated Angular 22 environment, then trace the @angular/aria overlay positioning and scroll handling. Done means the select, menu, and other overlay panels remain aligned with their trigger without visible Y-axis lag or jitter while scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100