Ionic infinite scroll doesn't work on all android devices

Question

I'm currently developing an ionic app and successfully implemented an infinite scroll feature. It works fine on desktop browsers and newer android devices, however, i'm having problems with phones that run android version 4.1 or less.

The problem:

I open the page, it loads and displays the first 20 items just fine, i scroll to the bottom, the next 20 items load, but it doesn't let me scroll any further to see the next 20 items.

Here is a GIF showing how it looks on my desktop (the way it's supposed to work). desktop gif

Here is another GIF showing how it looks on my xperia phone (note how it doesn't let me scroll further on newly loaded items). xperia gif

However, when i refresh the page, or turn the phone into landscape mode after the next 20 items loaded, the scrolling works just fine so it seems like the phone doesn't know that the screen height changed when the new items loaded so i thought i could get it fixed by simply adding $ionicScrollDelegate.resize(); to tell the view to recalculate the size of its container, but that doesn't seem to fix it either.

Here is my JavaScript code:

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
   $scope.items = [];
   $scope.page = 1;
   $scope.totalPages = 1;


   $scope.loadMore = function() {
     if ($scope.page <= $scope.totalPages) {
       $http.get('http://localhost/test/recent/' + $scope.page).success(function(items) {
         var i = items.data.length;
         $scope.totalPages = items.pages;
         $scope.items = $scope.items.concat(items.data);

         $scope.$broadcast('scroll.infiniteScrollComplete');

         $scope.page = $scope.page + 1;
         if ($scope.page == $scope.totalPages + 1) {
           $scope.noMoreItemsAvailable = true;
         }
       });
     }
   }
 }])

HTML:

<ion-view view-title="Hello Stackoverflow">
  <ion-content>

    <a class="item" ng-repeat="item in items">
        {{item.title}}
        <span class="item-note">
            {{ item.timestamp | myDate }}
        </span>
    </a>

    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
  </ion-content>
</ion-view>

I've been stuck with this problem for2 days, googled for hours and tried many different things, but i couldn't find anything that fixed it.

Answer 1

Use collection-repeat instead of ng-repeat. It doesn't seem like Ionic with ng-repeat refreshes the view.

Answer 2

I have found a workaround... Change from this

<ion-content>

to

<ion-content overflow-scroll='false'>

to disable native scrolling in this particular view.