perf: Ionic pull to refresh with native scrolling using card class lag in version 1.0 (latest) on android native scrolling enabled.

Type: <span ionic-type>perf</span>

Platform: <span ionic-platform>android</span> <span ionic-platform-version>5.0</span> <span ionic-webview>webview</span>

<span ionic-description>Hi guys,

• Running latest version of ionic 1.0
• I have an android 5.0 HTC one M8.
• I’m running the ionic app and I have a view of 15 items initially loaded.
• JS scrolling is disabled (native scrolling enabled)
• using ng-repeat
• using card css class

Evey time I pull down to refresh, the ionic refresher appears but it’s animation is really laggy (it spins with lag and content that is moved down lags). Once the animation completes there is no lag. I am able to scroll down and up with no lag at all. Infinite scroll is also enabled (ion-infinite-scroll) and is working just fine. How to get rid of this laggy animation? There is no lag when using collection-repeat but I’m aiming for the native scrolling.

Just noticed that the lag is caused by the card css class.</span>

I tried with 3 items staticly and the issue still happens:

<ion-refresher
            pulling-text="Pull to refresh..."
            on-refresh="refresh()">
</ion-refresher>

<div class="card">a</div>
<div class="card">b</div>
<div class="card">c</div>

<span is-issue-template></span>

[mhartington]

Okay, so tested this out and saw some lag too on a nexus 5 running android 5.1. Switching out the cards for just items got rid of the lag. Changing the cards box-shadow to a simple border got rid of the lag as well.

This makes a lot of sense since box-shadows are really expensive and cause a lot of repaints.

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint/

This is an issue even with native scrolling. Hmm, could you all try adding this to your css.

.card {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

The old null-transform hack helped for me here.

[Corvi2]

i’m also very unhappy with the performance of ion-refresher. i’m showing ion-items with text and an avatar image below the refresher.