bug(cdk-experimetal/scrolling): Every item of input array is rendered initially

[Akxe]

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

Initially, before any scrolling occurs; every item of items passed to cdkVirtualFor is rendered. After scrolling down for a bit (till translateY of .cdk-virtual-scroll-content-wrapper changes) and scrolling up (even just a bit) the list of rendered elements sharing to only visible elements.

Reproduction

Could not create stackblitz with cdk-experimental nor angular v13. Here is an example of what it does in my fairly rudimentary case: https://youtu.be/ILHPaMk2hZU

related code:

<cdk-virtual-scroll-viewport autosize class="scroller">
	<rita-company
		class="mat-elevation-z3"
		*cdkVirtualFor="let company of companies$"
		[company]="company"
		[readonly]="isReadonly(company) | async"
		(editing)="editingCompanyChanged($event, company)">
	</rita-company>
</cdk-virtual-scroll-viewport>

---

Steps to reproduce:

1. Create a container and any item template. Fixed height for simplicity is perfect

<cdk-virtual-scroll-viewport autosize>
  <div *cdkVirtualFor="let item of items" style="height: 500px">{{item | json}}</div>
</cdk-virtual-scroll-viewport>

2. Populate items array with 1000 elements
3. View in elements panel, that there is the same number of divs as there is of items.

Expected Behavior

I expected only needed elements to be rendered.

Actual Behavior

Every element of my array is rendered making cdk-virtual-scroll-viewport do nothing!

Environment

Angular CLI: 13.0.3
Node: 14.15.4
Package Manager: npm 7.20.6
OS: win32 x64

Angular: 13.0.2
... animations, cdk, cdk-experimental, common, compiler
... compiler-cli, core, forms, language-service, material
... platform-browser, platform-browser-dynamic, router
... service-worker

Package Version

@angular-devkit/architect 0.1300.3
@angular-devkit/build-angular 13.0.3
@angular-devkit/core 13.0.3
@angular-devkit/schematics 13.0.3
@angular/cli 13.0.3
@angular/google-maps 12.1.3
@schematics/angular 13.0.3
rxjs 7.4.0
typescript 4.4.4

[Akxe]

From looking into it, the line below is the cause:

components/src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

Line 408 in 7bbe68d

end: startIndex + Math.ceil(viewport.getViewportSize() / this._averager.getAverageItemSize()),

It is so because the default/initial value of ItemSizeAverager is a static value of 50px. I my case the average item height is 700px thus when it comes down to rendering the rendered range is {start: -1, end: 24} rather than {start: -1, end: 3}.

---

To fix this issue, I could see a few possible solutions:

• Render the first item to get its height and use that as average.
• Accept user-supplied guess of
  • how many elements should be rendered
  • or how high the average element is
• Render elements one by one, till the initial screen is filled, the possible visible flicker could be mitigated using staggered animation of opacity