Scrolling large lists with infinite scroll slows down app on Sony Experia phones

[basvdijk]

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/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: When scrolling down a list of items with infinite scroll the app gets slower and slower till it eventually freezes. To quote an Experia user of our app "I use a Xperia Z5 and for normal use it takes me about two minutes to reach the freezing point and less then a minute until larger slowdowns"

Expected behavior: Smooth scrolling

Steps to reproduce: Create a large list with infinite scroll on keep scrolling on an Xperia phone

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.1.2 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v7.2.0
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002
    ios-deploy : not installed
    ios-sim    : 5.0.13
    npm        : 5.1.0

[antoine92190]

Use the virtual-scroll feature and your problem will fade away :wink:

[basvdijk]

@antoine92190 Ok, how did you implement the virtual scroll list combined with infinite-scroll? I have paged data in an array which is extended with the next page every time the infinite-scroll fires.

Currently I have:

    <div *ngFor="let book of top100Books">
        <osi-book-list-item [bookData]="book"></osi-book-list-item>
    </div>

    <ion-infinite-scroll *ngIf="nextPage" (ionInfinite)="loadMore($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

Loadmore extends the top100Book with the new data

[antoine92190]

There are still some bugs existing with virtual-scroll, but I think it works well with infinite-scroll. The documented way to use virtual scroll is:

    <ion-list [virtualScroll]="top100Books">
        <ion-item *virtualItem="let book"></ion-item>
    </ion-list>

    <ion-infinite-scroll *ngIf="nextPage" (ionInfinite)="loadMore($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

I am not sure how it will work with your code, but you can try and see how it goes!

http://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

[basvdijk]

Thanks! I've tried the virtual-scroll but it made things worse, white pages, flickering, render artefacts. Not exactly what I expected ;)

[antoine92190]

Yes that's still buggy, especially with complex and custom lists. Unfortunately, it is this only way to solve your problem. Give it a chance, the first time I implemented virtual-scroll with my lists, it was extremely buggy. But after adapting some things, it looks quit good now!

[antoine92190]

There is also a pull request being verified that should help a lot #12194

[basvdijk]

Thanks for you help with this issue! The thing is I have different heights of items which made it hard er but added the averageHeight parameter.

Besides the lists are no problem on other phones except the Experia series. Samsung Edge, Motorola X series etc. all work fine. I hope the Ionic team can tackle which the especially the Experia phones have issues with lists.

[antoine92190]

I'm not sure why you experience this issue only on Experia, because I had the exact same problem on my iPhone 5s. That's the reason I had to use virtual-scroll.

[basvdijk]

Ok, I have never heard any complaints on speed on any Android or iOS device. Just on Experia, I think the other devices handle the scrolling of 100 items pretty well.

[antoine92190]

If it's only 100 items, it does. I experience the issue when having more than a thousand items. So yes, maybe your issue is specific to Experia.

[jgw96]

Hello, thanks for using Ionic! @basvdijk , would you mind sharing a repo we could use to look into this? Also, what version of Android is your Experia running? I hightly doubt its something specific to the experia device as its most likely running Android > 5.0 which means that its running the same chrome webview as every other Android device running 5.0 and up.

[basvdijk]

@jgw96 The customer used a Xperia Z5 which is from september 2015 as far as I could find. Could it be webview related? I knew back when we used Ionic1 this was a pain and you had to embed another webview version in your package to make it work smooth.

I can't really share my repo with you but maybe you can tell what you'd like to see? Another solution could be perhaps a Skype call where I share my desktop.

[jgw96]

Hello @basvdijk , yeah that was from back before android 5 was a thing. Nowadays android 5 and up are on the majority of devices out there, which includes the xperia devices. After thinking about this, most likely your logic in the infinite scroll handler has a memory leak. I dont really need the full repo, but just a repo with the minimal amount of code needed to reproduce the issue.

[basvdijk]

@jgw96 can I reach you by email so I can send my code snippets via mail?

[jgw96]

@basvdijk sure, its justin@ionic.io. Thanks!

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