Ionic-framework: Virtual Scroll- Combination of Scrolling and Filtering Results in Empty Nodes

[bparvizi]

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

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

Current behavior:
Combination of scrolling and filtering results in empty nodes when using the virtual scroll component.

Expected behavior:
Combination of scrolling and filtering should not result in empty nodes when using the virtual scroll component.

Steps to reproduce:
Please follow the following steps using the sample app on Github, https://github.com/bparvizi/virtual-scroll-render-bug. Recording of the issue can also be viewed on YouTube, https://youtu.be/q50TSKBhBxE

1) Start app.
2) Scroll all the way down to item 100.
3) Make sure scrolling is at a complete stop.
4) Click on the segment tab, “Filter 5”, in the footer to filter the virtual scroll list down to 5 items.
5) Make sure scrolling is at a complete stop.
6) Click on the segment tab, “All 100”, in the footer to filter the virtual scroll back to 100 items.
7) Notice nodes display empty. This is reproducible both on iOS and in Chrome on the desktop,

Examined the markup and the nodes are present when the virtual scroll displays blank, however, the y position does not get updated and remains to be set to values way down the list. For example, the style tag that sets the transform property will have large y values (2394px):

style="transform: translate3d(0px, 2394px, 0px);"

The nodes are not updated to reflect new y values set to the top like 0px, 126px, etc until the user manually scrolls again. Our app uses cell heights of 80px which appears to really show the issue as seen here.

Related code:
Sample app made available on Github, https://github.com/bparvizi/virtual-scroll-render-bug

[elin-y]

I can confirm this behavior.

[elin-y]

@masimplo Can you take a look at this? After your great improvements on VirtualScroll by #12917, may be it is a simple fix for you.

[bparvizi]

My recommendation is to stay away from virtual scroll. When your users start to experience blank screens from doing innocent operations like filtering and scrolling it's simply not production quality. Something that should be so simple, but excruciatingly painful with no workaround. Tried to auto scroll using a reference to the content, but iOS doesn’t seem to process the scroll events reliably and throws exceptions making the matter even worse. Working with this component has been the biggest time drain and nightmare. Completely worthless.

[ericdesa]

I just encountered this issue too.

When the user scroll, an offset is maintained here: https://github.com/ionic-team/ionic/blob/v3/src/components/virtual-scroll/virtual-scroll.ts#L720

This value is used to move the cells at the right place:
https://github.com/ionic-team/ionic/blob/v3/src/components/virtual-scroll/virtual-util.ts#L317

But when the scroll offset is changed by a filter, the virtual-scroll is not informed about it.

In my case, I always scroll to top when I use a filter, so I was able to solve this issue by calling this.virtualScroll.scrollUpdate({ scrollTop: 0 } as any)

page.html

<ion-content>
    <ion-list #virtualScroll [...]>
            // cells
    </ion-list>
</ion-content>

page.ts

@ViewChild(Content) content: Content;
@ViewChild('virtualScroll', { read: VirtualScroll }) virtualScroll: VirtualScroll;

protected async myUpdateFunction() {
    await this.content.scrollTo(0, 0, 0);
    this.virtualScroll.scrollUpdate({ scrollTop: 0 } as any);
    // data loading
}

[thibaultzanini]

I encountered this issue as well and I tried the solution provided by @ericdesa, but it did not work for me.

So instead of using the VirtualScroll component provided by the ionic team I used this one:
https://github.com/rintoj/ngx-virtual-scroller

The performance are not exceptional when a user is scrolling very quickly, but at least it works!

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/321

[flowli]

In my case, I always scroll to top when I use a filter, so I was able to solve this issue by calling this.virtualScroll.scrollUpdate({ scrollTop: 0 } as any)

page.html

<ion-content>
    <ion-list #virtualScroll [...]>
            // cells
    </ion-list>
</ion-content>

page.ts

@ViewChild(Content) content: Content;
@ViewChild('virtualScroll', { read: VirtualScroll }) virtualScroll: VirtualScroll;

protected async myUpdateFunction() {
    await this.content.scrollTo(0, 0, 0);
    this.virtualScroll.scrollUpdate({ scrollTop: 0 } as any);
    // data loading
}

This worked for me, too - since scrolling up is alright for me when the filter changes. Just make sure the ViewChild is inside the controller class and you import the correct modules (import {Component, ViewChild} from '@angular/core'; import {…, VirtualScroll} from 'ionic-angular';) at the top of the file.

[indraraj26]

Hey @flowli ,

how this function getting executed ?
protected async myUpdateFuntion() {
} ?
i have paste the same code in my app but it is not working as expected.

[flowli]

@indraraj26 you "manually" run this function whenever you filter or generally change the data bound to the referenced VirtualScroll element. If you find a way to automatically run it when assigning new data it would be appreciated :)

[indraraj26]

Hey @flowli ,

When i bind function to (input) of ion-input i get this error;

Uncaught TypeError: Cannot read property 'height' of undefined
    at adjustRendered (virtual-util.js:406)
    at virtual-scroll.js:481

Even this is same in ionic 3: https://github.com/ionic-team/ionic-v3/issues/986

Thank you

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