angular / angular/components

bug(cdk/overlay): scroll blocking overlay persists when documentElement shrinks to the point it is not needed

Offen
#30,943 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/overlay P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Description

This came up for an app that had a button to launch a full screen dialog. When you click the button it essentially hides the main app and launches the dialog. However, at the time the dialog launches, the content is still showing so it calculates the height based on documentElement here (https://github.com/angular/components/blob/main/src/cdk/overlay/scroll/block-scroll-strategy.ts#L111) and determines the scroll blocking class is needed. The main content then disappears making the blocking class unnecessary, but it never updates after the initial calculation. This results in a disabled scrollbar being shown in the app.

As a workaround, apps in this situation should ensure that they remove content they want to hide & wait for that change to be rendered in the DOM before launching the dialog.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne in src/cdk/overlay/scroll/block-scroll-strategy.ts etwa bei Zeile 111, wo die Größe von documentElement verwendet wird, um zu entscheiden, ob das Scrollen blockiert werden muss. Reproduziere die Abfolge, indem du einen Vollbilddialog öffnest, während der Hauptinhalt noch vorhanden ist, und ihn dann ausblendest. Als abgeschlossen gilt die Änderung, wenn der unnötige Blockierungszustand nicht länger bestehen bleibt und die deaktivierte Bildlaufleiste nicht angezeigt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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