angular / angular/components

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

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

説明

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

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

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

    調査の方向性

    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.

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

    評価

    技術スタック
    angular, typescript
    領域
    frontend
    issue の種類
    バグ
    難易度
    4/5
    見積もり時間
    3〜5日
    活発さ
    静か
    明瞭さ
    おおむね明確
    初心者へのやさしさ
    48/100

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

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