Android scrolling lag


#1

Hey guys,

i’m working on an app for teachers. When i test my app on an ios device or my tablet, that runs android 4.2, everything is ok. But on my nexus 5 it is really sloppy and slow, even on extrem short pages.

Can anyone help me? Thank you very much!

cheers Nils


#2

Hey there

So there could be a few things going on here.
Android in general is a bit choppy and can be problematic.
Can you post a sample of something close to what you have?
Also what version of ionic are you using? Beta 13 or the nightly builds?


#3

Hey there,
thanks for the fast response. I’ve created a small example. You find it here: https://github.com/nbussman/IonicListLagAndroid
I think i’m using the latest version of ionic (CLI v1.2.12)

Hope you can help me and many thanks for your commitment

Nils


#4

Hey guys, is there really no solution ? greez


#5

I got the same issue.
Watching this threat might get help, Ionic list's slow with 200 items


#6

If you running anything on a 4.3 or below device, you’re going to get some choppy performance because of the webview.
Those version of android are notorious for having bad webviews.

What has seemed to solve many issues is using crosswalk in an android app.


#7

thanks for your help!
I will try crosswalk, even if the problem seems to be stronger on android 4.4 and 5 devices.


#8

It’s not the webview, it’s ion-content and ion-list. I’ve got a list of more than 400 items populated by using ng-repeat in a list inside a 4.0.4 app and it’s as smooth as on desktop chrome. I’ve just needed to remove ion-content and replace it with div overflow + unbinding things that don’t need to be binded. AS you can see below there’s also quite complicated expression for ng-show for each item and this is still smooth.

<div class="my-content">
      <div class="my-list">
          <div class="my-item"
              ng-repeat="product in products | orderBy : sortOrder : sortReverse track by product.id "
              ng-show="(
                          ((product.mg <= levels.medium) && toggleData.rangeA)
                          ||
                          ((product.mg > levels.medium) && (product.mg <= levels.high) && toggleData.rangeB)
                          ||
                          ((product.mg > levels.high)  && toggleData.rangeC)
                          )
                          && !(!product.fav && toggleData.favList)
                          && (!input.search || ([product.title]|filter:filter.search).length)
                          "
              on-hold="onHold(product)"
              >
              <div class="producttext"><span ng-click="handleFavorite(product)" ng-class="{'ion-android-star product-fav' : product.fav }"></span><span once-text="product.title"></span></div>
              <div once-class="getBadge(product.mg)" once-text="product.mg"></div>
          </div>
      </div>
  </div>

Cheers,
Rafal


#9

Great idea, will try this! Thanks @rafaellop


#10

Have you got sample about this css class in Codepen? I tried but I don’t have scroll in my Android.
Thanks.


#11

No, I don’t have a code pen, but try the below code. Should do the job:

.my-content {
    overflow-y: scroll;
    height: 100%;
}

cheers,
Rafal


#13

Webview isn’t that bad. I’ve got good results with simple apps. However crosswalked apps start longer and have siginfically bigger binaries. Not much speed increase in simple apps. It is just not worth to add 15-20 MB of Chrome to an app which only task is to present simple master/details views and do some rest calls. Different story is with canvas apps like games. Cheers, Rafal


#14

Thank for your quick reply.
I did like it before but my app in android doesn’t have scroll :smile: and cannot swipe down. I read some guide and they said app should use some other thirst party scrolling.

Currently, I have list with over 1000 items, so I do a workaround by using infinitescroll to load 20 items per time from array. However, I still like the way loading all items to list :smiley:


#15

Strange, I have no problem to scroll on android div + overflow-y set to scroll. There’s only no scrolling handle (scrollbars) but this is not a big issue. I suppose the articles you refer to are covering this very topic, not the scrolling. Maybe you have some bugs in your css.


#16

On the actual Android 5.0.1 there are no scroll lags. Everything is running smoothly. Tested on Nexus 5.


#17

Hi Rafal,
Can you please post a codepen fr above solution?


#18

Thank you! this works for me, after removing ion-item and ion-list the performance is as well as running it on web.


#19

Hi man, you could retain the ion-list but you will need to enable the native scrolling, and than everything works great.