Collection-repeat very slow transition and rendering in Android 4.4.2

[casper5822]

Short description of the problem:

Transitions between pages are slow using collection-repeat on Android 4.4.2 Galaxy S3 Neo. Cache, Forward cache, hardware acceleration enabled.

Steps to reproduce:

1. Create a collection of ion-item in ion-content, in the first page there are background images, in the second one a text ion-item with swipe.
2. Navigation between cached view (rendering lag)

First view list:
  <ion-list >
            <ion-item class="card responsive-card" ng-click="showFullstopTips(fullstop)"
                      collection-repeat="fullstop in products  | orderBy:'-aging'"
                      style="padding:0px;background-color:transparent;">

               <div style="margin-top:5px;margin-bottom:5px">
              <div class="food">
                <div class="cover" bg-image="{{fullstop_avatars + fullstop.img +'.'+fullstop.imgType}}">
                 <label>
                   <font>{{fullstop.nomeFullstop}}</font>
                 </label>
                 <div isolate-click class="icon-left-top">
                   <button ng-click="showFullstopCardMenu($event,fullstop)"
                           style="font-size:1em;background:#99a129;color:#fff;border-bottom-left-radius:20%;min-height:auto;"
                           class="button button-icon  button button-clear "
                           ng-class="{'ion-android-more-horizontal':!isIOS,'ion-ios-more':isIOS}">
                   </button>
                 </div>
                </div>
               <div class="info">
                 <a  href="javascript:;" class="recipe">
                     <i class="ion ion-arrow-graph-down-right icon-card" ng-class="{'lime':fullstop.highlights}" ng-show="!fullstop.seguito"></i>
                     <i class="ion ion-ios-heart icon-card" ng-class="{'lime':fullstop.highlights}" ng-show="fullstop.seguito"></i>
                   <font>
                     <span ng-show="fullstop.countNewTip==1" ng-class="{'lime': fullstop.highlights}"><b> {{fullstop.countNewTip}} {{'SHOP_PAGE.NUOVO' | translate}}</b></span>
                     <span ng-show="fullstop.countNewTip>1" ng-class="{'lime': fullstop.highlights}"><b> {{fullstop.countNewTip}} {{'SHOP_PAGE.NUOVI' | translate}}</b></span>
                   </font>
                 </a>
                 <div class="content">
                     <a href="javascript:;" style="font-size: 1.22em;text-decoration:none;color:#347474" ng-click="mostraNavigatore(fullstop)" isolate-click>
                       <i class="ion-ios-location"></i>
                       <b>{{"GO_HERE" | translate}}</b>
                     </a>
                     <p style="margin:0;" ng-hide="!fullstop.distance || fullstop.distance ==-1">
                       <i class="ion-map"></i>
                       {{fullstop.distance}} Km
                     </p>
                     <p style="margin:0">
                       <i class="ion-ios-telephone"></i>
                       <b>{{fullstop.telefono}}</b>
                     </p>
                 </div>
               </div>
             </div>
            </div>
           </ion-item>
          </ion-list>

Second view list (items detail view):

  <ion-list can-swipe="true">
          <ion-item class="item item-icon-left item-button-right item-card"
                    collection-repeat="tip in fullstop.tips  | orderBy:orderBy.target"
                    style="padding-right:0px;margin-left:0px;margin-right:0px">
              <i ng-show="tip.followers==0" class="icon fullstop-icon ion-arrow-graph-down-right icon-color"></i>
              <i ng-show="tip.followers==1" class="icon fullstop-icon ion-ios-heart" style="color:#c14732"></i>
              <div ng-click="dettagliTip(tip)">
                    <h2 class="title" style="margin-right:15px;line-height:1.5"><b>{{tip.titolo}}</b> </h2>
                    <p>{{'DETTAGLI_FULLSTOP_TIP_PAGE.SCADENZA' | translate}}: {{tip.scadenza  | date:'dd/MM/yyyy  HH:mm'}}</p>
                    <p>{{'DETTAGLI_FULLSTOP_TIP_PAGE.MAX_CLIENTI' | translate}}: {{tip.maxUsers}}</p>
              </div>
               <button class="button button-positive" ng-click="showPopup(tip)" style="margin-top:23px">
                  <i style="left:6px" class="icon" ng-class="{'ion-android-cart':!isIOS,'ion-ios-cart':isIOS}"></i>
                </button>

              <ion-option-button class="button-assertive" ng-click="rifiutaTip(tip)">{{'CART_PAGE.RIFIUTA' | translate}}</ion-option-button>
              <ion-option-button class="button" style="background-color:purple;color:white" ng-click="segnalaAbuso(tip)">{{'CART_PAGE.SEGNALA' | translate}}</ion-option-button>
          </ion-item>
      </ion-list>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

The issue is not present on newer devices like Galaxy 7, Huawei P9 etc. I try to switch to a normal ng-repeat and the issue disappears. I have also native scroll enabled. If user clicks on the first card item, the transition takes about 3 seconds to go to the second view. The data are dowloaded in the afterEnter event the first time, then from the second time the view is forward cached and the lag becomes 2 seconds. If i comment the second list, the lag disappears. Maybe it is only a device performance issue? A lot of users have this problem, our app is in production.

Thanks for your help.

Which Ionic Version? 1.x or 2.x Ionic Version 1.3.3 Cli 2.1.1 Crosswalk