todo(ion-virtual-scroll): Bugs and feature requests

[paulstelzer]

Collection of issues which are related to ion-virtual-scroll (if i missed a issue, please let me know) - for @manucorporat and the dev team

Needs investigation:

• [ ] #17190 - Virtual Scroll does not implement virtualTrackBy
• [ ] #17095 - virtual-scroll with table row
• [x] #16432 - Routing via Ionic 4 Virtual Scroll makes the user end up outside of ngZone
• [ ] #16256 - ion-virtual-scroll inside ion-split-pane rendering issue
• [x] #16050 - does not handle css class correctly
• [x] #16023 - doesn't call ngOnInit of all its children
• [ ] #13392 - Combination of scrolling and filtering should not result in empty nodes when using the virtual scroll component.
• [ ] #15258 - Can't apply virtualTrackBy on virtual-scroll component
• [ ] #14915 - Virtual scroll + infinite scroll not working
• [ ] #14681 - ion-virtual-scroll only updates list when scrolling
• [x] #14591 - Virtual Scroll does not work inside of an ion-tab

Bugs (rendering issues):

• [x] #15948 - itemHeight bug
• [ ] #15744 - items are not rerendered if the state changes
• [ ] #15706 - items aren't rendered correctly
• [ ] #15653 - Virtual Scroll example buggy
• [x] #15587 - virtual-scroll does not render all items and shows white space
• [ ] #15573 - doesn't always render correctly when it's items change
• [ ] #15539 - Ion-slides renders a wrong number of items
• [ ] #15471 - dynamic content will cause the rendered list in unpredictable order

Feature requests:

• [ ] #16930 - support for responsiveness and more than one item per row

[berchik]

Thank you @paulstelzer for making this collection. Not being able to use long lists in Ionic is the top limitation preventing me from using the framework. Having reliable professional and well-behaved components would be important for me (and more than few others I believe) over any other nice/exciting developments by the wonderful Ionic team.

[pjc2007]

@paulstelzer - I have just added the following as feature request (https://github.com/ionic-team/ionic/issues/16930)

[DavidWiesner]

I created a pull request #17345 addressing the issues #15948, #17298 and #14681

[touch2hussain]

Seriously these issues are major blockers for us to use ionic v4 :(

[ASHFAQPATWARI]

ion-item-divider sticky attribute does not work with inside virtual scroll

[Mazus]

Hey, I think you can add #17371 By the way, can you tell us if you are currently looking into these issues ?

I actually don't know how to have correct performance without using virtual-scroll, but if I do, then there are several problems with data update not being reflected, and I'm kinda stuck.

Is there any workaround or should I use infinite-scroll ?

Thanks

[JustasKuizinas]

I think this should be priority number 1, a lot of apps have large lists of data and infinite scroll isn't solution

[mnaduvadka]

On Scrolling it loads previously loaded item images from higher in the menu for the new items, then corrects once it loads the correct item image. Here overall user experience is very bad. They see one image when scrolling, and the new image gets loaded after some time. Experience is not smooth, and its confusing

[FernetB]

Has anybody found an alternative to virtual scroll?

Because ion-list is not a good choice when i have a +100 items, and virtual scroll has a lot of bugs.

Infinite scroll is not a good idea when i have 3 slides of list, because all of them uses the same event (ionInfinite)

[188599]

I can verify that issue #15471 is still occurring in the current version.

I have a little repo right here: https://stackblitz.com/edit/ionic-v4-angular-tabs-8xtl6w

It won't always render in the wrong order, but if you refresh a few times it should.

Here is a screenshot of it:

Also, it seems the elements are rendered in the opposite order, starting from the last to the first, whenever it does render all of them in the right order.

[dorontal]

@brandyscarney and @paulstelzer and @manucorporat -- yes, here's a similar but informative open issue (#18409) not on your list. I would like to help close this and similar issues. But since these issues have been around for more than a year, I'd like to start after being briefed on what has been done so far and how to move forward. Is that possible, or do I need to dig around on my own? Please do not hesitate to contact me if you have any leads on how to solve this issue.

[aabi0044]

version 5.0.0 ion-virtual-scroll doesn't show more than three items and instead of that show white spaces

[Yohandah]

I've been trying to use ion-virtual-scroll but after many bugs encountered I've decided to use the CDK Virtual Scroll which is more reliable. Especially the update mechanism of CDK Virtual Scroll is more convenient as we can update the full list item this.list = newList and the component manages the update. If we do that with ion-virtual-scroll the list will blink

[lincolnthree]

@Yohandah Sorry to hear you had the same issues with virtual scroll we have. The ion-virtual-scroll seems incredibly bugged in many (documented and reported) ways. Do you have an example of using CDK Virtual Scroll that effectively replaced ion-virtual-scroll, that you can post here?

I'm interested to see what your CDK VS implementation looks like, to see if we could improve our own solution. Right now we are using an in-house fork of https://github.com/rintoj/ngx-virtual-scroller

[Yohandah]

@lincolnthree Basically I wanted to implement a ion-virtual-scroll with a ion-infinite-scroll, after encountering many bugs as I said I, found this PR (https://github.com/ionic-team/ionic-docs/pull/1406/files) on Ionic's Github that is not merged yet and there's literally a section that tells to use CDK ... so I went for it. It was released with Angular 8 if I recall correctly ..

I started with a basic implementation (https://stackblitz.com/edit/angular-material-cdk-virtual-scrolling?file=src/app/app.component.html) and then added an "infinite behavior" using this tutorial https://fireship.io/lessons/infinite-virtual-scroll-angular-cdk/ using their nextBatch method that triggers a call to my ws to load more data when reaching the end of the list. I didn't use a DataSource or an Observable for the list source, but just an Array.

What I liked about CDK is that you can use Angular ChangeDetection ... which allows for instance to update your data doing this.items = newItems instead of ion-virtual-scroll having to update the actual array's instance and then doing checkRange() (I couldn't because my items were coming from NgRx so ...) because otherwise it would make your list blink when updated (and I needed to add items at the top, and the end of the list, simultaniously)

[Yohandah]

@lincolnthree Looks like you should migrate to CDK VirtualScroller!

2 days ago from Ionic Staff:

With upcoming major versions of Ionic Framework, we are going to be transitioning to using Angular's CDK Scroller.

https://github.com/ionic-team/ionic-framework/issues/22084#issuecomment-692045477

[lincolnthree]

@Yohandah Wooo!! Thank you for sharing this concept, and for sharing the team's direction. This is great news. I'm going to be looking at CDK virtual scroller soon, although I think it still does not support a few things that ngx-virtual-scroll does that we need. (Like multiple items per row / multiple columns / line wrapping):

https://github.com/angular/components/issues/10114

[eshell]

following the infinite scroll example, I cant get past "object is possibly null" referring to ev.target. for some reason if i use "ev.detail.complete()" instead of "ev.target.complete()", it will work once or twice before the ev.target becomes null again.

[timsar2]

Maybe this trick is helpful:

article in dev.to

or

try to resize screen in stackblitz

[wiegell]

ion-item-divider sticky attribute does not work with inside virtual scroll

Maybe you can use this example - material cdk though: https://stackblitz.com/edit/angular-ivy-pxmnpx?file=src/app/app.component.html

[liamdebeasi]

Thanks for the issue! With the release of Ionic 6, we made the decision to deprecate ion-virtual-scroll in favor of 3rd party solutions.

Moving forward, ion-virtual-scroll will only receive critical security fixes, and the component will be removed in Ionic 7. As a result, I am going to close this issue.

We have prepared migration guides for each of the 3 JavaScript frameworks we support, so developers can get started migrating right away.

Migration for Angular Migration for React Migration for Vue

Some Ionic components that rely on scrolling inside of ion-content have some limitations when using 3rd party virtual scrollers, but we are actively working on a solution for this. Please follow https://github.com/ionic-team/ionic-framework/issues/23437 for updates. Thanks for your patience as we work to resolve this issue.

We believe this change will lead to a healthier Ionic ecosystem as it frees up resources for the Ionic team to dedicate to other areas of this project while still giving developers options for performant virtual scroll solutions.

Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.