Ionic-framework: VirtualScroll Issue Round Up

[ghenry22]

I have run through all open tickets relating to virtualscroll and have compiled this list. Those tickets that still need action (unless otherwise noted) can still be reproduced. I have clearly listed duplicate tickets and tickets for issues that I can no longer reproduce with ionic2 RC1.

Hopefully this helps to clean up the open issues and can be used as a focus to target those virtualscroll issues that still exist. Most of these issues relate to ios uiwebview, although some are across all platforms.

Issues Confirmed Still Present in 3.4.2

7734 - virtualscroll shows blank screen when used inside an ion-segment (or other conditional such as *ngIf)

9765 - refresher component does not work with virtualscroll lists (with ionic 3.4.2 refresher cannot even be triggered if there is a virtual scroll list, cannot pull down properly)

9975 - ScrollToTop and ScrollTo(x,y) does not work on virtualscroll list with uiwebview. create a list, add a button that will scroll to top or a to a specific location. Scroll down the list and hit the button. The display of the list will either flicker or show part of the items at the scroll destination. As soon as you try to scroll again the list display refreshes to be back where you were before pressing the button. So essential scrollTo functions do nothing. (uiwebview). This was closed but is still definitely present.

9935 - filtering a virtualscroll list does not refocus the view port on the new list content. This issue is still present but has slightly different symptoms. I have updated the ticket with testing from v3.4.2

12649 - using ItemSliding with VirtualScroll causes multilpe items to be slid open at once

To be confirmed (I haven't had time to test this one yet)

11788 - When using virtual scroll with infinite scroll, when infinite scroll appends new items to the end of the list the list flickers and jumps slightly up or down.

Issue Confirmed Fixed/cannot reproduce in 3.4.2 (issues that can be closed)

Click on Details to see the fixed issues

6999 - I believe this should be the same issue as #8267, until there is a small extra scroll not all items render after scrolling stops.

8142 - Can be closed, tags not present, adding resolved the issue.

8032 - Can be closed, references issue #7734, otherwise I have tested and custom components do work in virtual scroll as of RC0, image rendering of avatars inside virtualscroll is also logged under #6983 which addresses all points referenced here.

7135 - Can be closed, virtualscroll list overlapped by header and footer. Cannot reproduce in RC0

7116 - Can be closed, there were commits by @manucorporat which resolved this already, I can confirm that I use sliding items in large virtual scroll list and they animate and work nicely currently in RC0.

6883 - Can be closed, initial scroll performance greatly improved, remaining issues with scroll acceleration covered in #6984

6984 - Referred to above, also closed for scroll related performance. Issue related to ion-refresher is logged under #9765

8267 - virtualscroll update after scrolling stops (otherwise a blank screen is shown until a small further movement is made)

6961 - Can be closed, cannot reproduce on either ios, android or browser in RC0

8037, #7056, #7024, #6423 (duplicates) - virtualscroll automatically scrolls to top of list on data change. Position should remain the same with the removed or added item included.

7947 - virtualscroll inside modal not contained to viewport on iOS, long lists run off the screen

6984 - virtualscroll on ios9 or earlier, refresher conflicts with scroll, when swiping down refresher is always triggered regardless of position in list. Means you can only scroll in one direction. Scroll acceleration also feels VERY slow compared to other platforms. No issue on android, also no issue with wkwebview and slightly better on ios10 with UIWebview.

6983 - ion-img in virtualscroll with ion-avatar results in corrupted image display.

6881 - custom component as virtualItem in virtualScroll leads to corrupted layout. There is a work around stated in the comments on this issue which could be added to the docs to address this.

6974 - virtualscroll inside ion-slide results in incorrect layout (I have not been able to test this one personally)

6512 - virtualscroll does not redraw when the list is updated to be empty. ie when search filter returns 0 results the list is not updated to show an empty list.

6394 - ios list does not bounce when using virtualscroll. Makes it feel VERY non-native. ngfor or static lists bounce as expected.

[jgw96]

@ghenry22 This is awesome! Thanks for putting this together. I am going over this now.

[manucorporat]

@ghenry22 thanks so much!!! this is amazing, I will start working on this and picker/datetime once all the mayor navigation issues are fixed

[comfortme]

great work! virtual scoll has so much performance potential yet is not cared enough.

[ghenry22]

@manucorporat @jgw96 No problem I thought I would try and help clean up some of the open issues and make it easier to focus on what is outstanding with virtualscroll.

[ghenry22]

@manucorporat @jgw96 could this please get pulled into either RC3 or RC4?

I know it's pre-release but virtualscroll has been very broken on ios since it was released as a feature. It would be really great to get it at least usable and close to on par with android.

[jgw96]

Hello @ghenry22 ! We have added #8267 to the rc3 milestone and will be working through these issues as we get closer to stable and after stable. Thanks!

[Ritzlgrmft]

I just (re-)opened an issue concerning virtual scroll: #9247

[Ritzlgrmft]

Another virtual scroll issue: #9350

[ghenry22]

Just started testing virtualscroll with RC4 as I saw there were some commits related to it. Unfortunately a lot of these issues still remain and some are even worse.

Scroll acceleration is now horrible in UIWebview on IOS. Very laggy and slow, far worse than in rc3.

Conflict with ion-refresher is still present on UIWebview on IOS. At any point if you swipe down (regardless of position in list) the refresher triggers. Previously this was annoying as it would reload the list data. In rc4, the whole app becomes unresponsive, it uses up all the memory available and then crashes.

So for an app using iOS with ion-refresher and virtualscroll it is still not possible to scroll a list up and down in RC4. Surely when talking about ionic components, nothing unusual and in RC stage this level of issue should be considered quite major? I know it's still pre-release and that's no problem. I'd just love to be able to start testing my app on ios properly and sharing the beta with people.

I would love to help the ionic team to get virtualscroll playing nice. I am happy to test changes or new builds against my app as fast as they can be released, I will spend as much of my time as needed to help.

Can someone PLEASE, PLEASE, PLEASE work on this?

[AmitMY]

Any update on this? Just tried using it today, and had many many problems

[ghenry22]

unfortunately I have not seen any updates to virtual scroll since about RC4. Hopefully the team will be able to put some focus onto in soon as it is driving me a bit nuts. It makes it really hard to get an ionic2 app live in a state that doesn't generate negative feedback with unpredictable list handling.

[ghenry22]

@manucorporat did make an awesome update to the wkwebview plugin though which allows you to access locally stored persistent storage so I was able to move to using that which resolved some of the harsher issues so I could actually publish my app in a reasonable state.

[zakton5]

Virtual scroll definitely needs some attention. As you said, @ghenry22, it is very difficult to release an ionic2 app that handles a lot of data with long lists without it. Could the ionic team give some updates on virtual scrolling in general, perhaps a road map? @jgw96 @manucorporat @danbucholtz

[ghenry22]

@manucorporat @jgw96 Hi Guys, any chance we could get a bit of focus onto fixing up virtualscroll in an upcoming version? There is a huge list of bugs here related to it and there are many more besides this since I compiled this list. Many over lap or dupe things already here.

Primarily I think if the below 4 issues were cleared up then many of the current virtualscroll issues could be closed out as lots relate to this behaviour or a variant of this behaviour. There is a PR hanging which may address the segments/conditional bug already as well.

If you can get some fixes in I am happy to put the time updating this list and doing basic testing and triage on related issues for you.

Virtualscroll inside a conditional (ie an ngif or in a segment)
Virtualscroll with refresher component (particularly on UIWebview)
Virtualscroll blank page when filtering/updating a list when not at the top of the list.
Virtualscroll page bounce needs to be enabled on iOS otherwise it feels very non-native.

[faraazc]

@ghenry22 adding to the list is the issue related to infinite-scroll with virtualscroll. This is a show stopper for using ionic. As it is basic requirement, because we cannot make an app similar to fb or twitter. This is the age for big data and ionic should fix this and make this as priority. @mhartington @adamdbradley @jgw96 @mlynch @brandyscarney @manucorporat

[brandyscarney]

We will be discussing this issue internally at our meeting tomorrow morning and will update this issue once we have a timeline for this. Thank you!

[JustasKuizinas]

@brandyscarney Virtual scroll is very important for fb,tw like apps, hope bugs will be fixed soon

[ghenry22]

@brandyscarney thanks for the update. As mentioned I am more than happy to donate time testing and cleaning up open issues related to virtualscroll so you guys can focus more on fixes for it! Just let me know if I can help in any way.

[agrt56]

Another virtualscroll issue introduced with rc4: #9660

[frederikschubert]

Most of these issues come from the fact that the views in the virtual scroll are created outside the angular zone. See https://github.com/driftyco/ionic/issues/10451

[szerner]

I added another Virtual Scroll issue.

[Sh1d0w]

Here is another one introduced with the latest version 2.3.0 - https://github.com/driftyco/ionic/issues/10907

[JustasKuizinas]

Maybe tbere are any alternatives to virtual scroll?

[Sh1d0w]

Another problem with virtual scroll on ionic-angular v3

Using a simple virtual scroll as stated in the docs produces:

<ion-list [virtualScroll]="items" approxItemHeight="100px">
  <ion-item *virtualItem="let item" no-padding>
    {{item}}
  </ion-item>
</ion-list>

[Error] TypeError: undefined is not an object (evaluating 'cell.top')
    updateDimensions (main.js:139524)
    (anonymous function) (main.js:86896:112)

[ghenry22]

@manucorporat I see you are working on some of the virtual scroll issues lately, thanks!!!

If there is any chance at all you could have a look at the following 2 issues while looking into virtual scroll it would remove some very long running blockers for me. In fact I'd gladly pay a bounty or just paypal over a hundred bucks or something to buy everyone on the ionic team coffee for a day :)

9655 - VIrtualscroll wrapped in any kind of conditional doesn't render (this means no virtual scroll in segments, no ability to use ngif to switch out visible lists)

9765 - Pull-to-Refresh doesn't work with virtualscroll on iOS. Means I can't give users the standard mechanism they expect to refresh a list when using virtualscroll.

[Bleil]

Any news about all that issues?? Especially the one about UIWebView on Safari iOS (PWA or full screen) that make me unable to scroll anything...

[jdm79]

when I open the messages page, the message items in the list are all overlapping the ones below. if I scroll down just a bit, it sorts itself out. this could be something I'm doing wrong, but when I take Virtual Scroll off, it's all fine, using normal 'let message of messages'. this will be a big part of our app for clients to see their messages/comments so would love to get this right.

<ion-list [virtualScroll]="messages" [approxItemHeight]=" '36px' " [approxItemWidth]=" '36px' ">
  <button ion-item *virtualItem="let message">
    <ion-avatar item-left>
      <ion-img [src]="message.url_avatar_auteur"></ion-img>
    </ion-avatar>
    <h2>{{ message.nom_auteur }}</h2>
    <h3 text-wrap>{{ message.contenu }}</h3>
    <ion-note item-right>{{ (message.date_creation | amFromUnix | amTimeAgo)}}</ion-note>
  </button>
</ion-list>

[daveshirman]

@jdm79 Hey, I'm literally getting the same problem right now. Have you found any solution?

[ghenry22]

The problem is likely the variable height of the items. Virtual-scroll really wants all items to be the same height. Could you do a test where all messages displayed the same number of lines and see if the overlapping issue goes away? If it does then it's almost a feature request for virtual-scroll to support variable item height in a list.

[daveshirman]

@ghenry22 Nope, even with a static item template e.g.

<ion-item>
    <p>dkfjhfd dfigj dfg </p>
    <p>dkfjhfd dfigj dfg </p>
    <p>dkfjhfd dfigj dfg </p>
</ion-item>

This problem persists. VirtualScroll is simply broken and it is ridiculous that this is marked as production ready.

[jdm79]

@ghenry22 we won't have control over the height of the message items, as they will be populated by user messages from our web app, which are anything from one word to several paragraphs. that is not our final design template above either...might be giving more room to the message and less to the 'date_creation'!

@daveshirman I'll be working on other parts of the app in the meantime, but when I come back to this and (IF) I find a solution, will post.

[ghenry22]

You always have control over what you display, you can truncate it with a ... Or similar on the client side and only display the same amount of data for all. I believe that virtualscroll relies on all items being the same.size so it's probably worth testing that to confirm the issue then you could log a ticket that is more specific like "virtualscroll with different item heights causes overlapping items" which makes it easier for the ionic team

[ghenry22]

@daveshirman that's weird I haven't come across overlapping items when the item template is fixed.

I do agree though that there are very significant issues with virtualscroll that need some love considering it is supposed to be release quality, seems like ionic are working on it a bit lately so fingers crossed.

[ChezRD]

@daveshirman you forgot abiut approxheight param. Console must warn you about missing. By default it's 44px.

At this point only strange thing besides all described above is that items rearranges when data changed to exactly the same array. Basically it looks like list is reversed and 15ms later in correct order. Scroll position us fine so this is only bad for desktop. Mobile is... Fine i guess. Need to check in iphone

[daveshirman]

@ChezRD no I didn't. I have that attribute set. Mobile is not fine. You do not know what you are talking about it seems. I have examples of it not working on mobile as do others.

[voegtlel]

Just added #11755

[ChezRD]

@daveshirman did you tried your code on ionic-angular@nightly builds?

@jgw96 found huge problem:
Chrome reduces js cycles to background tabs so if in background i run data update which refresh all data passed to virtualscroll or if data loading is long and i switch tab when data loading and get back in 3 to 5 minutes virtual scroll is stuck for a minute or more and rows seems have chaotic order before it unlag.
Tested on latest chrome, intel i3 6100, 8ram, ssd, less than 10 tabs (most memory used by iobic app itself), i can give login pass to real app on production to show what i mean to pm. As temporary solution i use browser background/foreground detection on window api, but reordering flash when data rows updated still sucks

[voegtlel]

Also added #11759

[ghenry22]

@manucorporat @jgw96

Guys could you please allocate some time to fixing this laundry list of virtualscroll issues? This is getting very frustrating.

It honestly makes it so hard to publish an ionic app for iOS in usable condition with all these issues around virtualscroll lists. Virtualscroll is a great selling point for ionic 2 as it gives the user the ability to have fast and responsive lists from large datasets but it has to work better than how it is.

[JustasKuizinas]

@ghenry22 Good point we are also getting to the finish with our app and if virtual scroll bugs won't be fixed we can't publish it. I think virtual scroll scroll is the key point in most apps these days, unless you are publishing barcode scanner app.

[naveedahmed1]

@ghenry22 it seems that the below issues have been resolved, please take a look and update the list:

https://github.com/driftyco/ionic/issues/8267
https://github.com/driftyco/ionic/issues/6999
https://github.com/driftyco/ionic/issues/8037
https://github.com/driftyco/ionic/issues/7056
https://github.com/driftyco/ionic/issues/7024
https://github.com/driftyco/ionic/issues/6423
https://github.com/driftyco/ionic/issues/7947
https://github.com/driftyco/ionic/issues/6984
https://github.com/driftyco/ionic/issues/6983
https://github.com/driftyco/ionic/issues/6881

[ghenry22]

@naveedahmed1 I am working through this list and will then go through any other newer virtual scroll issues logged. I am updating the lists of those currently present and those still outstanding in the first post gradually. It will take a few days at least to work through and validated issues again with the latest version of ionic.

[djstomp]

same issue here, which only happens on iOS in standalone mode
https://github.com/ionic-team/ionic/issues/10082

[masimplo]

@ghenry22 Just opened some issues present in 3.3.0, maybe you want to add them to the list

12034

12035

12036

[petermm]

12047 as well - difficult to say if it's a duplicate, given the amount of issues relating to virtualScroll.

[JustasKuizinas]

Maybe anyone use some kind of alternative to virtual scroll? I love ionic but it's virtual scroll is far far away from production use :)

[ghenry22]

@manucorporat @jgw96 I have updated this list for v3.4.2 and will review through new tickets over the coming week and add them in gradually as I have time to verify them. Would really appreciate if you could allocate some time to working on the confirmed issues.

[HugoHeneault]

@manucorporat @jgw96 Any updates planned on VirtualScroll for the upcoming 3.5.0? I'm about to start using it but if nothing's planned for the weeks to come I'll have to find some workaround and wait before using VirtualScroll. :(
If you have some time to get back to us so we can know if we'll have to wait for some months could be great!
Thanks for your great work guys, just keep going!

[HugoHeneault]

Could we have some news from the ionic team? At least a "wait for a few days/weeks/months" would be much appreciated. 👍

[jgw96]

Hello all! Just an update on this. We are currently working on getting ionic-angular v4 ready which is going to bring some very nice improvements to our loading performance, which is something we have been working on a while. So, while we do not plan on having any virtual scroll specific fixes in the next release, we do have this issue in our priority queue and will be fixing the remaining issues. In the meantime, if one of the issues that are listed as still an issue in the latest release affects your use case, i would recommend infinite scroll as a good alternative. Also, for iOS i would recommend installing our wkwebview plugin to get the best virtual scroll experience.
TLDR: We have this issue in our priority queue and plan on fixing the issues listed, but right now this issue is behind some other higher priority issues, like bundle size and load time.

[HugoHeneault]

Thank you very much @jgw96 for this good news! One quick thought: what about https://github.com/ionic-team/ionic/pull/12194? It seems to fix some of the most annoying issues and it's already done, it just needs some review. :-)
Do you guys have any ideas about the v4 ETA?
Thanks for all your great work!

[HugoHeneault]

I've just added a new issue about VirtualScroll about VS slowing down the page with big a tree layout inside it: https://github.com/ionic-team/ionic/issues/12392

[zakton5]

I am still seeing that #6512 is an issue in 3.5.3

[leandroz]

One issue thats happening to me is the mixed of WKWebView + Sliding Items.
Basically what happens is that the sliding does not happen and I see in the console:
CDVWKWebViewEngine: handleStopScroll

The only moment where it works, its if I do the gesture before the handleStopScroll appears in the console.

[evenmind]

Can someone help me with this VirtualScroll issue?

https://github.com/ionic-team/ionic/issues/13772

[pitamash]

Also not working with ion-slide.

[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/135