angular / angular/components

bug(COMPONENT): CDK Virtual Scroller jump back/flickers to items on top

Aperta
#27,104 29 commenti 5 reazioni 0 assegnatari Vedi su GitHub
area: cdk/scrolling P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

I'm getting an annoying behaviour while scrolling, where items snap/jump back and I'm never able to scroll all the way down the end of the list. I've notice though, that this bug happens only when I use the virtual scrolling within a material dialog

Template

```




  • {{scan.value.name}}



  • ```

    CSS

    `
    .scroll-viewport {
    height: 200px;
    }
    `

    ### Reproduction

    - Implement **cdk-virtual-scroll-viewport** scroller **inside a Angular Material dialog**
    - in the template set **templateCacheSize:0**
    - try to scroll down

    ### Expected Behavior

    https://github.com/angular/components/assets/6199235/63111f97-c665-4cc0-8f8b-eead8d75a025

    ### Actual Behavior

    While scrolling down, the scroll jump up to the first times

    ### Environment

    - Angular: ~11.2.14
    - CDK/Material: ~11.2.13
    - Browser(s): Chrome
    - Operating System (e.g. Windows, macOS, Ubuntu): macOs Catalina

    Guida per i contributori

    Apri la guida per i contributori

    Direzione di ricerca

    Reproduce the issue with cdk-virtual-scroll-viewport inside an Angular Material dialog, using templateCacheSize:0 and the provided 200px viewport. Trace the virtual scrolling and dialog behavior while scrolling downward. Done means the list can be scrolled to the end without jumping back to the first items or flickering.

    Scritto dal modello di indicizzazione a partire dal testo della issue.

    Valutazione

    Stack tecnologico
    angular, typescript
    Ambito
    frontend
    Tipo di issue
    Bug
    Difficoltà
    4/5
    Tempo stimato
    3-5 giorni
    Stato di attività
    Tranquilla
    Chiarezza
    Abbastanza chiara
    Idoneità per principianti
    48/100

    Ricevi le nuove issue nella tua casella

    Un breve riepilogo di issue GitHub adatte ai principianti.