angular / angular/components

Virtual scroll has a scroll size limit

Abierto
#14,990 6 comentarios 1 reacción 0 asignados Ver en GitHub
area: cdk/scrolling P5
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend, performance
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.