angular / angular/components

bug(CDK/SCROLLING): <object> element in *cdkVirtualFor is glitching when using "templateCacheSize: 0"

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

Descripción

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

_No response_

### Description

When using No cache strategy (templateCacheSize: 0) for *cdkVirtualFor with element (as image), elements of list glitch while scrolling. Seems like cdkVirtualFor incorrectly init/reinit or reuse instances of listed elements.

When using tag instead of no bug detected.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/uyv2wg?file=src%2Fexample%2Fcdk-virtual-scroll-template-cache-example.html
Steps to reproduce:
1. Create list of 100 elements, use with image link data.
2. Scroll

### Expected Behavior

Smooth scrolling, correct reusing/reinit of list elements, no content replacing.

### Actual Behavior

Scrolling is not smooth (end sometimes end / start of list is unreachable), elements in list are replaced by content of sibling.

### Environment

- Angular: 17.0.0-rc.0 (and 15)
- CDK/Material: 16.2.10
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOs

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción enlazada de StackBlitz y verifica el comportamiento en Chrome usando cdkVirtualFor con templateCacheSize: 0 y object image elements. Lee la implementación de desplazamiento virtual de CDK en torno a la reutilización de templates y compárala con el caso de img. Se considera terminado cuando el desplazamiento es fluido, todos los elementos de la lista son accesibles y ningún contenido es reemplazado por un elemento hermano.

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

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.