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

[Donovantxy]

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

<cdk-virtual-scroll-viewport class="scroll-viewport" itemSize="20">
   <li class="scan-list__item" cdkVirtualFor="let scan of pointClouds| keyvalue:classesByNameAsc;templateCacheSize:0">
        <div class="scan-list__scan">
            <div class="scan-list__scan__left">
              <div>{{scan.value.name}}</div>
            </div>
        </div>
   </li>
</cdk-virtual-scroll-viewport\>

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

Screen.Recording.2023-05-16.at.17.28.24.mov

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

[aeslinger0]

I think when I got this behavior last it was because the itemSize was a tiny bit off of the actual row height. Maybe double check that your itemSize includes border or margins?

[NikGurev]

@Donovantxy did you manage to fix the issue?

[RCout1nho]

Does anyone have success with this?

[Faulkner368]

I am currently experiencing this also, but only when applying templateCacheSize:0 which I need as I need the components to be destroyed and constructed when scrolling.

If I remove this templateCacheSize:0 it scrolls OK.

Anyone figured out the issue here ?

[RCout1nho]

@Faulkner368 the same happened to me, I think this happens because the cached elements increase the size of the container div and it must interfere with the scroll, I don't know if it's a bug in the lib or if it's possible to solve it by changing the container

[Faulkner368]

@RCout1nho was wondering the same, if so I dont think there will be a work around as the component is getting destroyed it cant have any height

[EmilOlovsson]

@RCout1nho @Faulkner368 @NikGurev I have spent a few hours with this problem and I found a solution that worked for me.

Browser: Chrome (Version 124.0.6367.118 (Official Build) (64-bit))

Original layout:

<cdk-virtual-scroll-viewport>
    <div class="cdk-virtual-scroll-content-wrapper"></div>
    <div class="cdk-virtual-scroll-spacer"></div>
</cdk-virtual-scroll-viewport>

New layout:

<cdk-virtual-scroll-viewport>
    <div class="cdk-virtual-scroll-spacer"></div>
    <div class="cdk-virtual-scroll-content-wrapper"></div>
</cdk-virtual-scroll-viewport>

I moved .cdk-virtual-scroll-spacer before .cdk-virtual-scroll-content-wrapper

[shiv19]

I ended up using the appendOnly mode

<cdk-virtual-scroll-viewport
            appendOnly
            itemSize="68"
            minBufferPx="1020"
            maxBufferPx="1360">
</cdk-virtual-scroll-viewport>

#27104 (comment)

[BdDragos]

@RCout1nho @Faulkner368 @NikGurev I have spent a few hours with this problem and I found a solution that worked for me.

Browser: Chrome (Version 124.0.6367.118 (Official Build) (64-bit))

Original layout:

<cdk-virtual-scroll-viewport>
    <div class="cdk-virtual-scroll-content-wrapper"></div>
    <div class="cdk-virtual-scroll-spacer"></div>
</cdk-virtual-scroll-viewport>

New layout:

<cdk-virtual-scroll-viewport>
    <div class="cdk-virtual-scroll-spacer"></div>
    <div class="cdk-virtual-scroll-content-wrapper"></div>
</cdk-virtual-scroll-viewport>

I moved .cdk-virtual-scroll-spacer before .cdk-virtual-scroll-content-wrapper

Can you explain how you achieved this please? Since these are auto generated for me when I use cdkVirtualFor, and I also encounter this scrolling issue.

[Faulkner368]

@BdDragos I found there were two causes, not having correctly calculated the itemSize but this is a well known cause and was not the issue for me, which was caused by using templateCacheSize:0.

Setting the cache to zero was not ideal since I want as much of a performance boost as possible so to understand my solution you need to understand why I was setting cache to zero.

I am working with existing, large and complex components that ideally would have been refactored but I did not have time for that. These components were processing and changing property values during construction and / or during OnInit life cycle which resulted in an issue where I was seeing the wrong text on screen for a component after scrolling and the bound data changing which occured because instead of constructing new components when scrolling it reuses previously constructed components by changing the bound data and during change detection this would get picked up; however the component is an existing one so the constructor and the OnInit method is not executed again so the processing that was needed in my case did not occur and was thus seeing the wrong values.

Setting cache to zero means it would not reuse existing components and would construct new ones, thus solving my issue. However it introduced the issue discussed here and I suspect its due to the calculations on itemSize when components are being destroyed and new ones created there is a brief moment where total height is not adding up... that is my suspicion anyway.

So I did a hacky fix as had insufficient time for a refactor on these large components, so I removed the templateCacheSize:0 and used OnChanges to do the processing that was taking place originally in OnInit and in the constructor so when the bindings are updated so when change detection runs everything was displayed as it should be.

So in summary I fixed this by removing templateCacheSize:0 and achieved my goal by using OnChanges to do the processing that was previously happening in OnInit and constructor, hope that helps

[BdDragos]

For me the bug happens with and without the templaceCacheSize (but templateCacheSize not to 0 fixes it in most cases*).
Unfortunately in our case ngOnChanges is not a solution since there are some very complex components that need to be rendered and I also depend on other browser limitations that would make the processing not possible without a lot of refactoring and extra code.