The blank area when user is scrolling quickly in cdk-virtual-scroll

[Rajalekshmirl07]

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

cdk-virtual-scroll-viewport, is showing white blank space when scroll quickly. If we use minBufferPx and maxBufferPx to reduce the blank space, it was badly affecting the scroll smoothness and CPU performance

Reproduction

Steps to reproduce:

1. create a table with icons, images and heavy CSS in each row using cdk-virtual-scroll
2. scroll the mouse wheel fastly back and forth to see the blank space

Expected Behavior

It should behave like we are in the table, it should not show the blank space

Actual Behavior

It is showing blank space on quick scroll

Environment

• Angular: 13
• CDK/Material:
• Browser(s): chrome, mozilla firefox, edge
• Operating System (e.g. Windows, macOS, Ubuntu): windows

[JEntler]

Have you tried including the fix related to this issue?

<div style="position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none"></div>

I had a similar issue and including this div outside of <cdk-virtual-scroll-viewport> fixed it.

[zarend]

Hello @Rajalekshmirl07, does the issue persist for you?

[ivan-artkod]

I can confirm the issue similar to this still occurs in @angular/cdk 13.2.2

In my situation I had built paginated grid (table) with virtual scroll, where tr elements were the virtual items. The tr elements were rendered with some heavy components, so I made it virtual scrolled and also used appendOnly prop to improve rendering performance (and it worked great).

The problem I faced was that on initial render (first page of results) <cdk-virtual-scroll-viewport> scroll was behaving exactly how described above. However, once next page or results was loaded, the issue was completely gone and virtual scroll worked without any issue.

I have attempted to apply the "fix" described in post by @JEntler but in my situation it did not work (also played with parent css, nothing worked...).

After many attempts to figure out why was it behaving like that, I have accidentally changed the [itemSize] input prop from size 29px to something less.... to my surprise, that for some reason made rendering with less "blank" space.

So I played around with the value and finally set it to [itemSize]="1". That was my fix. Now it renders smooth on first render just like on any subsequent.

my final code:

<cdk-virtual-scroll-viewport appendOnly [itemSize]="1">
     <table class="table table-bordered table-hover table-sm table-grid">
          <thead> <!-- unimportant header code with column rendering --> </thead>
          <tbody>
               <tr *cdkVirtualFor="let row of results;" [appRow]="row"></tr>
          </tbody>
</table>
</cdk-virtual-scroll-viewport>

[alexsherekin]

@ivan-artkod so you literally say to the virtual scroll container, that your elements are 1px high. Assume the container is 100px high, so it will create 100 elements on the first render and every time you scroll 1px down, additional elements will be created. And the bigger your hosting container is the more elements will be created on the first render, regardless of their actual height. Long story short, you almost disabled virtual scrolling with these settings.

Consider using minBufferPx and maxBufferPx props to control the size of prerendered area (count of prerendered elements);

[plusnia-pgs]

Any idea how to solve this problem? I have tried to change min and max buffer px but no good results :/

[alexsherekin]

@plusnia-pgs could you show your code?

[plusnia-pgs]

Only this works for me <div style="position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none"></div> https://stackblitz.com/edit/angular-qj59ib?file=src%2Fapp%2Fcdk-virtual-scroll-append-only-example.html

[andrewseguin]

Please provide a stackblitz example of the issue

[amysorto]

Closing this issue due to no recent activity, if this is still an issue please create a new issue with a reproduction.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}