CODEWITHSUNDEEP
angularjsionic-framework
user2924127
user2924127

Reputation: 6242

This is slow on my android device

I have a scrolling list in my mobile app which I build using ionic 1.0.1. The list is quite choppy when scrolling. The text blurs a little when scrolling. I checked Facebook's app on my phone and it scrolls very nicely, no chopping and blur. I have created a code pen and was wondering if there is anything I can do to improve the performance of this:

http://codepen.io/anon/pen/GJdpRz

HTML:

<html ng-app="mobileApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic List Bug</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>

</head>

<body ng-controller="MainCtrl">

  <ion-content>
    <ion-item collection-repeat="item in items">
      <div class="list card">

        <div class="item item-avatar">
          <img src="mcfly.jpg">
          <h2>{{item}}</h2>
          <p>{{item}}</p>
        </div>

        <div class="item item-body">
          <img class="full-image" src="delorean.jpg">
          <p>
            {{item}}
          </p>
          <p>
            <a href="#" class="subdued">1 Like</a>
            <a href="#" class="subdued">5 Comments</a>
          </p>
        </div>

        <div class="item tabs tabs-secondary tabs-icon-left">
          <a class="tab-item" href="#">
            <i class="icon ion-thumbsup"></i> Like
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-chatbox"></i> Comment
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-share"></i> Share
          </a>
        </div>

      </div>
    </ion-item>
  </ion-content>

</body>

</html>

JS:

angular.module('mobileApp', ['ionic'])

.config(function($ionicConfigProvider) {
  if (!ionic.Platform.isIOS()) $ionicConfigProvider.scrolling.jsScrolling(false);
})

.controller('MainCtrl', ['$scope', function($scope) {

  $scope.items = [];

  for (i = 0; i < 10; i++) {
    $scope.items.push("Item " + i);
  }
}]);

Upvotes: 1

Views: 436

Answers (1)

Karan Kumar
Karan Kumar

Reputation: 2665

There isnt much we can do right now, but for now you can put this is your .config , this will allow native scrolling. I did see a performance improvement in scrolling. 

.config(function($ionicConfigProvider) {
  if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);

Upvotes: 1

Related Questions