angular / angular/components

bug(aria): overlay panel jitters/lags on Y axis when scrolling the page while open (select, menu, listbox, etc.)

Offen
#33,548 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/overlay gemini-triaged P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere das Jitter-Verhalten im Angular-Aria-Menübeispiel unter https://angular.dev/guide/aria/menu#example-1 mit der angegebenen Angular-22-Umgebung und verfolge anschließend die Overlay-Positionierung und Scroll-Behandlung von @angular/aria. Als abgeschlossen gilt die Aufgabe, wenn select, Menü und andere Overlay-Panels beim Scrollen ohne sichtbare Verzögerung oder Jitter auf der Y-Achse an ihrem Trigger ausgerichtet bleiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.