angular / angular/components

Virtual scroll has a scroll size limit

オープン
#14,990 コメント 6 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: cdk/scrolling P5
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend, performance
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。