Virtual Scroll Scrolling Issue

[naveedahmed1]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I am using virtualScroll with ion-infinite-scroll. After recent update. When I scroll the list and reach to the bottom, ion-infinite-scroll causes next items to be fetched from server and append to the list.

Previously appending of items was smooth, after recent update when new items are appended to the list, it gives a flickering effect due to unnecessary automatic scroll either upward or downward i.e. if I set approxItemHeight to 101px it scroll currently displayed item little downward and when I set it to 100px it takes currently displayed item upward by few pixels.

[jgw96]

Thanks for opening an issue with us, we will look into this.

[masimplo]

Seems related to #11851

[faraazc]

@manucorporat is there any workaround to overcome this issue. Please can we expect this to be fixed in the next upcoming ionic release. Thanks. This is stopping us from using virtualscroll

[wmaurer]

@faraazc FYI, I completely gave up using Ionic VirtualScroll. For some reason it's very low on Ionic's priority list. I'm building a tablet app for business use, and so a VirtualScroll component which performs well even when the source data changes is rather important (think master-detail with filters on the list). Right now I'm using https://github.com/rintoj/angular2-virtual-scroll.

[beckson]

@wmaurer How do you use the angular2-virtual-scroll in ionic?

[wmaurer]

@beckson I simply use it as described in the readme.

[seiyria]

I wanted to use angular2-virtual-scroll since I'm having a bunch of issues with ionics VS component as well. Take note that the library @wmaurer does not support list headers. If you don't need that, then you're probably still good to go.

[tonypig93]

I'm facing the same problem, the virtual scroll list always flicker when it fetches more data with infinite scroll, it's really annoying.

[Vane101]

Hope this will be fixed soon.

[ourarash]

Is there any update on this? Were you guys able to use virtual scroll successfully?

[wmaurer]

I get the feeling that the Ionic team have abandoned the existing virtual scroll component in favour of stencil.js components.

In the meantime we need to either live with bug, use another component (like I did) or create PR to fix the virtual scroll component.

Hey, it's Open Source, we can't complain.

[masimplo]

@wmaurer I have submitted a PR that fixes a few issues including the flickering ionic-team/ionic-framework#12917. It has been merged into master, just not released yet. I have a few more fixes submitted for virtual scroll which will probably be merged after this release and made available on the next one.
Virtual scroll is a complicated component and not very well written as it has been refactored a few times. That being said, anyone is free to submit a PR as I did and help with its porting to stencil.js which is much more important than the current state of the component in the current version, so that we won't have similar issues in the future.

Have a read of my PR as there is a discussion about infinite scroll in there too and feel free to use either the patches or ionic@nightly to see if it fixes your issues.

[ourarash]

@masimplo Thanks for your update. I was able to make virtual scroll work (sort of... It still has to have all heights locked at a certain value). But I wasn't able to find a way to dynamically remove items from the list.
I tried two things:

1. Removing items from the array, but the items are not shown correctly
2. Using a show flag, like below

None of these worked. I appreciate any help.

What I want to do is to have a search bar that searches through the items (more than 1000) and only shows the ones that matched.

<ion-list [virtualScroll]="fromArray">

<div *virtualItem="let f ; let i = index">
      <ion-card class='item-card' *ngIf="f.show!==false">

        <my-item></my-item>

      </ion-card>
    </div>
</ion-list>

[ourarash]

@masimplo Thanks for your update. I was able to make virtual scroll work (sort of... It still has to have all heights locked at a certain value). But I wasn't able to find a way to dynamically remove items from the list.
I tried two things:

1. Removing items from the array, but the items are not shown correctly. Others have reported this too: https://forum.ionicframework.com/t/remove-item-from-virtual-scroll/86819
2. Using a show flag, as shown below

None of these worked. I appreciate any help.

What I want to do is to have a search bar that searches through the items (more than 1000) and only show the ones that match the search term.

<ion-list [virtualScroll]="fromArray">

<div *virtualItem="let f ; let i = index">
      <ion-card class='item-card' *ngIf="f.show!==false">

        <my-item></my-item>

      </ion-card>
    </div>
</ion-list>

[mgnstudio7]

I have also had problems when using ionic virtual scroll.
this is my solution stenciljs-virtual-scroll
I hope it help you

[jgpATs2w]

Upgrading ionic-angular to 3.9.2 fixed virtualscroll issues for me

[jgpATs2w]

Upgrade fixed temporarily, the issue is back. It always happens when virtualscroll has rendered a list that doesn't fill the container.

[wall-street-dev]

Is there any update on this?