Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular.js mobile browser app freezes on iOS 8 Safari

Our Angular.js Web App sometimes freezes on iOS8 Safari. When this issue happens, the ng-click callback is not triggered. If you replace ng-click with a regular javascript onclick, it would work. It doesn't happen in Chrome on iOS8 devices.

Has anyone else noticed this issue on iOS8 Safari or has a fix for it?

This simple view freezes sometimes on iOS8 safari. The freeze usually happens when you have the tab open, go to other tabs on browser or maybe leave the browser experience and come back later. In this example when the view freezes while tapping on the links tapCount doesn't increase. The more complicated the view the easier it gets to freeze. In this example browser would freeze for a few seconds when I tap on the links quickly. Usually freeze takes longer on real complicated views.

var app = angular.module('myApp', []);
app.controller('freezeCtrl', function($scope) {
  $scope['tapCount'] = 0;

$scope['dummyItems'] = [];
for(var i = 0; i < 15; i++) {
    var anItem = {'id': i};
    ($scope['dummyItems']).push(anItem);
}

$scope['updateTapCount'] = function() {
    $scope.tapCount += 1;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div  ng-app="myApp">
  <div ng-controller="freezeCtrl">
    <p>Tap Count = {{tapCount}}</p>
    <ul>
        <li ng-repeat="item in dummyItems" bindonce>
            <p>This is a dummy item #{{item.id}}</p>
        </li>
    </ul>
    <div>
      <button ng-click="updateTapCount()">Button 1</button>
      <button ng-click="updateTapCount()">Button 2</button>
    </div>
  </div>
</div>
like image 205
Sara Navidpour Avatar asked May 01 '15 20:05

Sara Navidpour


1 Answers

I found the solution and seems like I found the solution right about the time someone else fixed the bug in Angular! It's fixed in Angular 1.3.x.

The bug is at "isArrayLike" in angular.js code. Sometimes while obj.length is undefined after assignment "var length = obj.length;" variable length gets the value "1". This would result in isArrayLike returning true for objects that are not arrayLike. This bug in particular would break angular's forEach and subsequently JQLite's "eventHandler". So no event handlers would execute when this happened.

like image 84
Sara Navidpour Avatar answered Oct 29 '22 04:10

Sara Navidpour