[ionic 4 beta.7] Virtual Scroller doesn't always render correctly when it's items change

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\gordo\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v10.9.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

The virtualscroller does not always render correctly when changes are made to it’s input data (list of items). It would appear that the class virtual-loading sometimes ends up staying on elements that should be visible, even though they appear to be positioned correctly.

I can remedy this by forcing the elements to be visible:

.virtual-loading {
    opacity: 1 !important;
}

But this is not ideal as it means that if any items are slightly different from the value in approxItemHeight then the jumps in position are visible as the list recalculates.

On a further note, even when this gets remedied, it would be extremely useful to have a public method so that we can force complete recalculations of the virtualscroller’s items on demand.

[yekeskin]

I had a similar problem. Giving virtual scroll an itemHeight function instead of using approxItemHeight solved it.

[kael]

Well, if you’re using Ionic/Angular Virtual Scroll, not sure it’ll scale ; been there, done that. A list of with 600 ion-item-sliding with an image, a title, a description, and sliding options, didn’t scale.

You’d rather write your own Virtual Scroll component with Stencil based on the existing one, but with some custom method so that you can be better in control of virtual elements lifecycle. Observable are great for data binding, but when adding some traces it becomes scary to see so many checks and created/destroyed elements.

Also, you could make use of ngZone I believe, but I’m not up-to-date with Angular, though.