Issues with cdk-virtual-scroll-viewport?

[AndreasSchmid1]

I used this plugin already successfully in 2 different angular projects and it worked great. I have now a project where i have to use the "cdk-virtual-scroll-viewport". As soon as i add "ellipsis" everything goes basically crazy. It starts flickering, order is wrong when scroll back up and so on.

[nolafs]

Any news on this one?

[lentschi]

@AndreasSchmid1 @nolafs Sorry for taking so long to respond. It is hard to support an external library such as materials's cdk-virtual-scroll-viewport, because that would require me to analyze the source code of such a library in depth.

But that said, I couldn't reproduce your problem. I did a fork from material's Stackblitz example and added an ellipsis there, which seems to work just fine: https://stackblitz.com/edit/angular-1smu3f :smiley:

I don't doubt however that in some context what you described will happen. That might be due to the resize detection strategy you use. Have you tried using a different one than the default (e.g. ellipsis-resize-detection="window")? If that doesn't help, please provide a failing example (on StackBlitz/GitHub/...)

[Joaovtrc]

Try using templateCacheSize=0

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
   <div *cdkVirtualFor="let item of items; templateCacheSize: 0" class="example-item">{{item}} 
   </div>
</cdk-virtual-scroll-viewport>

As the View Recycling part on the documentation to see if it works... I've had some trouble, but setting the CacheSize to 0 solved my problems...

[lentschi]

I'm closing this issue since noone provided a failing sample (StackBlitz or likewise) and the sample I provided above seems to work without issues (Actually there was one minor issue: The itemSize was incorrect, so it was a bit jumpy when using the mouse wheel, but I fixed that in the sample).

[schoste]

I have still the same problem on mobile devices or if i use the chrome device simulation. "templateCacheSize: 0 " helps on scrolling down but scrolling up have the same flickering behavior like before. If i use the items array like @lentschi in the stackblitz example everything is fine.

So i think it may be caused by my huge MatTreeFlatDataSource - only on mobile devices :(

[lentschi]

@schoste I don't think a large source could cause this - After all this is what virtual scroll is supposed to handle. But it's hard to tell without a code sample :thinking: I can only suggest that you try it with/without ngx-ellipsis and see how that affects the flickering. Also you could also try it with a different virtual scroll lib and maybe with ngx-nested-ellipsis (Rewrite of ngx-ellipsis that supports html contents. It's actually a bit slower than ngx-ellipsis, but maybe something in the different code helps your cause.)

[schoste]

You are right @lentschi - it have nothing to do with the ngx-ellipsis. I have still the same behavior without it. It seems to be a Problem between the MatTreeFlatDataSource with expanded/collapsed Children and the CdkVirtualFor. Thanks for your time & have a nice day!