Ionic-framework: virtualScroll flashes "wrong" items and in inverse order on init/reinit

[petermm]

Ionic version: (check one with "x")
[ X] 3.x

I'm submitting a ... (check one with "x")
[X ] bug report

Current behavior:
A virtualScroll list will flash "wrong" items (and in inverse order) - before showing correctly.
This is especially obvious on (slower) devices (iphone 5s - not really slow but..)

Expected behavior:
The virtualScroll list is not shown until it is in correct order/state, it should not flash "wrong" items, nor in inverse order.

Steps to reproduce:
The plunker is fully up to date. - click the button to empty and refill the list("reinit" the virtualScroll).
the [hidden] does not effect the behaviour nor does the console.log in virtualTrackBy.

use chrome dev tools -> performance -> to throttle cpu 10x-20x and see that the flash is in inverse order.
http://plnkr.co/edit/VyvZo6iJgYK6exyrPcAe?p=preview

Other information:
This is a blocking bug for using virtualScroll.

Also notice that the virtualTrackBy is called 3 separate times (times items.length), might not be optimal.

[jgw96]

Thanks for using Ionic, we will look into this.

[petermm]

fwiw, I was able to use https://github.com/rintoj/angular2-virtual-scroll - add to app module and then do the following, appears to work great, and as expected..

<ion-content no-bounce>
  <virtual-scroll
    [hidden]="items.length"
    [items]="items"
    (update)="scrollItems = $event"
    style="height: 100%; display: block"  ion-fixed>
    <div *ngFor="let item of scrollItems;trackBy: item?.id;let i = index" style="width: 100%">
      <ion-item style="width: 100%" (click)="clickItem(item, i)" >
        {{item.id}}
      </ion-item>
    </div>
  </virtual-scroll>
</ion-content>

[trebor678]

+1

[trebor678]

@petermm I tried using angular2-virtual-scroll but couldn't get it to work with Ionic. It seems like the list that it sends from the update function doesn't contain any items. Which version are you using?

[JustasKuizinas]

+1

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