Issue with Angular.js mobile browser app causing freeze on iOS 8 Safari

Our Angular.js Web App is experiencing occasional freezing on iOS8 Safari. When the freeze occurs, the ng-click callback fails to trigger. Interestingly, replacing ng-click with a standard javascript onclick resolves the issue. It's worth noting that this problem does not occur in Chrome on iOS8 devices.

Are there others who have encountered similar issues with iOS8 Safari or found a solution?

This particular view sometimes becomes unresponsive on iOS8 Safari. The freezing typically occurs when switching tabs within the browser or navigating away from and then returning to the page. For instance, in the provided example, the tapCount fails to increase when tapping on links as the view freezes. The more complex the view, the higher the likelihood of encountering a freeze. In this scenario, the browser may pause for a few seconds when rapidly tapping on links. Freezing tends to last even longer with more intricate 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>

Answer №1

After some thorough investigation, I managed to uncover the solution right around the same time someone else resolved the issue in Angular! The bug has been rectified in Angular 1.3.x.

The problematic area lies within the "isArrayLike" function in the angular.js codebase. On certain occasions, when "obj.length" is undefined following the assignment of "var length = obj.length;", the variable "length" incorrectly ends up with a value of "1". As a result, isArrayLike mistakenly returns true for objects that are not actually array-like. This particular bug caused disruptions in angular's forEach function and subsequently impacted JQLite's "eventHandler", leading to the failure of event handlers execution under these circumstances.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the finish time based on the initial time and length of time - IOS

I've researched this question extensively on Google but couldn't find any Objective C code for it. The scenario I'm dealing with involves calculating the end time from a given start time. For example: let's say the current date and tim ...

When employing Flatlist, an issue arises where the image fails to appear on the screen, accompanied by an error message stating "value for uri cannot be cast from Double to String."

I'm facing an issue with displaying images in my flatlist. The error message I receive is "Error while updating property 'src' of a view managed by : RTCImageView." Can anyone help me identify what might be causing this problem in my code? ...

Single array returned by observable

Issue: I am looking for a way to consolidate the multiple arrays returned individually into a single array. Solution: fetchAllRiders() { var distanceObs = Observable.create(observer => { this.http.get(this.API + '/driver/all').map(res = ...

React: The `style` attribute requires a key-value mapping of style properties, rather than a simple string

I am attempting to use React to render the following HTML code: <a style='background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helve ...

What is the process for verifying the password field in bootstrap?

In my asp.net project using bootstrap, I have implemented password field validation. When the user clicks on the password field, an information box is displayed. <div id="pswd_info"> <h4>Password requirements:</h4> <ul> ...

The Ajax functionality seems to be malfunctioning when attempting to call a

Required Tasks : I have successfully developed an HTML page with the functionality to store a group of form fields into a separate file. Utilizing the Ajax function (AjaxLoad), I am able to send data to file.php and save it successfully. Although I ...

Is it possible to retrieve data from a database using jQuery and store it in separate variables?

I am able to print out one field from a table, but I want to display all fields in separate tables. How can I achieve this? Below is my save/load code: // Save/Load data. $('').ready(function() { if($.cookie('code')) { $.aj ...

Using Angular to filter an ng-repeat by an array

How can I filter an ng-repeat by an array of items? I attempted using the following code: <tr ng-repeat="item in items | filter: filteredItems"> My filteredItems array contains a subset of items, but this approach doesn't seem to be effective. ...

Having difficulty retaining the value of a variable following the retrieval of JSON data

For my current project, I am utilizing the highstocks charting library in combination with JQuery. My goal is to create a single chart divided into three sections, each displaying different data sets. To import the data, I have referenced the sample code p ...

Sending information to a component through navigationPassing data to a component

When attempting to move from one component to another page using routes and needing to send parameters along with it, I have experimented with passing them as state through history.push(..) like the following code. However, it does not seem to be working a ...

What is the best way to showcase multiple selected values in a div using jQuery?

Is there a way to use jquery to populate an empty div with the values selected from a multi-select dropdown? How can I achieve this in the context of the provided code snippet? <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm" c ...

Using alternative components in nextjs routes

Exploring how to set up 3 components within Next.js to achieve the desired snippet: <Route path="/" component={homePage} /> <Route path="/about" component={aboutPage} /> <Route path="/faq" component={faqPage} /& ...

Performing an Ajax GET request in jQuery with custom headers and displaying the response in a new tab/window

My AJAX GET request includes header parameters instead of URL parameters, like this: $.ajax({ url: "http://localhost/myendpoint/ABCDE-12345", headers: { 'X-Auth-Token' : myTokenId}, type: "GET", s ...

Encountering an error in Vue.js where a "cannot read property of undefined" message is displayed when attempting to use v

While attempting to use v-model on an array item's property, I encountered the error message "[Vue warn]: Error in render function: 'TypeError: Cannot read property 'viewFood' of undefined' when loading the page. This resulted in a ...

Error: Security Exception raised when making nested ajax requests

Here's a problem I'm facing. I've been using an ajax call in JavaScript/jQuery to extract Gmail contacts like so: function getUserInfo() { var xml_parse = ""; $.ajax({ url: SCOPE + '?max-results=9999&access_token=' + a ...

Restricting input in Angular using negative regular expressions - a new approach to input restriction directive

UPDATE: Please feel free to include additional validations that may be helpful for others within this straightforward directive. -- I am currently in the process of creating an Angular Directive that restricts the characters inputted into a text box. Whi ...

Sending data from a controller to a service in Angular

Currently, I'm facing an issue while attempting to transfer a parameter from a controller to a service in Angular. Let's start with the controller code snippet: angular.module('CityCtrl', []).controller('CityController',[&apo ...

When the content within the iframe is missing, the body text will simply

I'm having trouble extracting the content of an iframe as text: var OCRTextframe = '<iframe id="ocrtext" align="middle" src="http://localhost:...."/>'; OCRText.innerHTML = OCRTextframe; var myIFrameBody = jQuery( ...

Error encountered while trying to display content in the rendering area

const Pages = () => { return ( <> <Box display="flex"> {window.location.pathname === "/profile" ? undefined : <Sidebar />} <Box flex={3}> <Navbar /> <Routes> {/* Cont ...

JavaScript function overriding

Joomla.updatebutton is a vital javascript function within the Joomla platform. It is invoked upon submitting a form when a user clicks on either the cancel or save button. I have customized this function in the following manner: saveFunction = Joomla.subm ...