By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

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:

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

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.

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>

@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);

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