bug(cdkVirtualFor): cdkVirtualFor doesn't use trackBy if is rendered after cdk-virtual-scroll-viewport

[mstawick]

Reproduction

https://stackblitz.com/edit/components-issue-neavtp?file=src/app/example-component.html

Steps to reproduce:

1. For the left scroller, content is rendered 1s after the viewport (using ngIf)
2. For the right scroller, it's rendered at the same time
3. trackBy functions log to the console
4. You can see the logs when scrolling the right scroller, but not the left scroller

Expected Behavior

cdkVirtualFor always makes use of trackBy

Actual Behavior

cdkVirtualFor doesn't make use of trackBy, and when model is updated (ex. via update from the service), re-renders all the items, and not only the ones for which trackBy id has changed

Environment

Angular CLI: 11.0.4
Node: 14.14.0
OS: linux x64

Angular: 11.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1100.4
@angular-devkit/build-angular      0.1100.4
@angular-devkit/core               11.0.4
@angular-devkit/schematics         11.0.4
@angular/cdk                       11.0.2
@angular/material                  11.0.2
@angular/material-moment-adapter   11.0.2
@schematics/angular                11.0.4
@schematics/update                 0.1100.4
rxjs                               6.6.3
typescript                         4.0.5

[angular-automatic-lock-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.}