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

[GordoRank]

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.

[GordoRank]

After a little more testing it turns out that I can reproduce the problem every time by starting with a full list of many items, and then removing all of them apart from one.

That single remaining list item never has it's virtual-loading class removed even after it's position correctly. The issue happens at other time I think, but this case is reproducible every time.

[kael]

To force the recalculate of the list when the items list is updated, I'm using that tip.

There are also the markDirty() and markDirtyTail() methods that could be used.

[GordoRank]

Thanks Kael...

It's not a long term solution as it fires the window resize event which for me, will cause a whole bunch of other stuff to recalculate, but it's a great workaround for now.

[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.

[yekmyk]

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

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!