angular / angular/components

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

Aperta
#33,548 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
area: cdk/overlay gemini-triaged P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci il jitter nell’esempio di menu Angular Aria all’indirizzo https://angular.dev/guide/aria/menu#example-1 usando l’ambiente Angular 22 indicato, quindi traccia il posizionamento degli overlay e la gestione dello scorrimento di @angular/aria. Il lavoro è completato quando select, menu e gli altri pannelli di overlay rimangono allineati al relativo trigger senza ritardi o jitter visibili sull’asse Y durante lo scorrimento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
accessibility, frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
55/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.