angular / angular/components

Virtual scroll has a scroll size limit

Offen
#14,990 6 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/scrolling P5
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### What is the expected behavior?
The scroll is next to unlimited in its length

#### What is the current behavior?
Scrolling reaches it's limit at `3.3553e7px`

#### What are the steps to reproduce?
There should be 1 Million items 191739 are reachable
https://stackblitz.com/edit/angular-material2-issue-mlhd9q

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
```json
"@angular/cdk": "7.0.2",
"@angular/core": "7.0.1",
```

Google Chrome
Version 71.0.3578.98 (Official Build) (64-bit)

#### Is there anything else we should know?
It doesn't seem to be a browser limit. I have been able to create a larger scroll area than the limit above and also successfully used `translateY()` with a greater value.'

---
UPDATE:
I tried to debug it and found out the culprit is in the `measureScrollOffset()`: it starts to return wrong values at around 50.000.000px

https://github.com/angular/material2/blob/b51f14350200d1d0e9ad8c96485fd6dfe6e7a180/src/cdk/scrolling/scrollable.ts#L148

`el.scrollTop` returns a wrong value.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start with src/cdk/scrolling/scrollable.ts at measureScrollOffset(), then reproduce the StackBlitz case with 1 million items. Check el.scrollTop around the reported 33.553 million and 50 million pixel thresholds; done means virtual scrolling can reach all items without incorrect scroll offsets.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

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