angular / angular/components

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

Ouverte
#33,548 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/overlay gemini-triaged P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Reproduisez le jitter dans l’exemple de menu Angular Aria à l’adresse https://angular.dev/guide/aria/menu#example-1 en utilisant l’environnement Angular 22 indiqué, puis examinez le positionnement des overlays et la gestion du défilement de @angular/aria. Le travail est terminé lorsque le select, le menu et les autres panneaux d’overlay restent alignés sur leur trigger, sans latence ni jitter visibles sur l’axe Y pendant le défilement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.