APK (android) scrolling and transitions slow, but not in browser

ionic-v1
1

Hello!

I’m facing an issue, when I do ionic serve and run it on chrome, for example, the transitions and scrolling are very smooth. But if I build it for my device (Moto G2), it’s very laggy.

How to reproduce: ionic start myApp tabs and just add the lines below to the playlists.html:

<ion-view title="feed">
  <ion-nav-buttons side="left">
      <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-refresher
      pulling-text="refresh...">
    </ion-refresher>  

    <ion-item nav-transition="none" ng-repeat="playlist in playlists" class="list card" href="#/app/playlists/{{playlist.id}}">
      <div class="item item-avatar">
        <img ng-src="http://graph.facebook.com/{{reminder.facebook_id}}/picture">
        <h2>{{playlist.title}}</h2>
        <small><i class="icon ion-clock"></i>
          1239123128</small>
      </div>
      <div class="item item-body">
        <span>
          asdasdasdasdaljsdhakjsdhkajsdhkajshdkajhsd <br> ahahauhuah
        </span>
      </div>
    </ion-item>

    <ion-infinite-scroll
    distance="1%">
    </ion-infinite-scroll>
  </ion-content>
</ion-view>

Now, just build the apk via ionic build android or ionic run android (if you have the device plugged).

Particularly, the playlist scrolling and the transitions between playlist and its detail are laggy.

Ionic version: v1.00 rc .
Android version: Lollipop.

I really appreciate any help.

2

Hm, well the structure of your item is very complex, which could be adding to the issue.
It caused some issues in my tests, but this alternate structure is much smoother.

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" class=" item-avatar card" href="#/app/playlists/{{playlist.id}}">
        <img ng-src="http://graph.facebook.com/{{reminder.facebook_id}}/picture">
        <h2>{{playlist.title}}</h2>
        <small><i class="icon ion-clock"></i>
          1239123128</small>
        <span>
          asdasdasdasdaljsdhakjsdhkajsdhkajshdkajhsd <br> ahahauhuah
        </div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

And the box shadow will kill any performance. So we can place it with something a bit better.

.card{
  background-image: linear-gradient(0deg, #B2B2B2, #B2B2B2 50%, rgba(0, 0, 0, 0) 50%);
  box-shadow: none;
}
3 Likes
3

@mhartington, thank you for the reply.

I’ve noticed a slight improvement in the performance. But when I’m backing from the details to the list, it still a bit slow.

It gives me the shivers, since running via browser, everything is smooth.

I’ve tried Crosswalk, but nothing changed.

There is a way to change the transition type of an Ionic app?