angular / angular/components

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

Đang mở
#27,104 29 bình luận 5 reaction 0 người được giao Xem trên GitHub
area: cdk/scrolling P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

    Hướng dẫn đóng góp

    Mở hướng dẫn đóng góp

    Hướng nghiên cứu

    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.

    Do mô hình lập chỉ mục viết ra từ nội dung của issue.

    Đánh giá

    Công nghệ
    angular, typescript
    Lĩnh vực
    frontend
    Loại issue
    Lỗi
    Độ khó
    4/5
    Thời gian dự kiến
    3-5 ngày
    Mức độ hoạt động
    Ít trao đổi
    Độ rõ ràng
    Khá rõ ràng
    Mức phù hợp với người mới
    48/100

    Nhận issue mới trong hộp thư của bạn

    Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.