AngularJS Application experiencing extremely slow performance with IE's "Style Calculation" feature

In my AngularJS app, I am using Angular Material and loading data from an external API.

Everything runs smoothly in Chrome, Firefox, and Safari, but when it comes to Internet Explorer, the performance is abysmal. The app becomes slow, CSS animations are choppy, and overall usability is hindered.

I've spent a significant amount of time trying various bug fixes and debugging methods without any success.

Some observations I have made:

  • When running a performance log in IE11's Developer Tools, "Style Calculations" consume the most time.
  • The use of wildcard CSS selectors like *{box-sizing: border-box} leads to slower performance.

For example, simply scrolling through an md-virtual-repeat element produced the following output in the performance inspector:

https://i.sstatic.net/wysWo.png

As shown in the image, style calculation is a major bottleneck.

I have searched for solutions online but haven't found any effective workarounds. Could this be a distraction? Is there another issue within my app causing this problem despite having optimized my JavaScript code as much as possible?

cssangularjsperformanceinternet-explorer

Answer №1

I recently encountered an issue where a "Style Calculations" process was causing significant lag, taking up to 700ms while scrolling and maxing out the CPU at 100% (on IE11, Win10).

Upon investigation, I discovered that the culprit was a CSS rule with a "+ " selector, like this:

.menu li + li a {border: 0}

Once I removed this problematic rule, everything started working smoothly again.

Hoping this information can help someone else save a few hours of troubleshooting time.

Answer №2

In a comment, @ngDeveloper suggests that the solution is to update ngMaterial. I encountered a similar issue where positionElements was the culprit.

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

What design pattern serves as the foundation for Angularjs? Is mastering just one design pattern sufficient?

Although I have been teaching myself Angular and can understand how to code in it, I realize that simply learning the concepts of AngularJS and coding or tweaking things to solve problems is not enough. Moving forward, my goal is to write effective and sta ...

javascriptangularjsdesign-patterns

Display PHP array information in an HTML table

I am facing an issue with an array that contains a record set generated by the CodeIgniter model. When attempting to display these records in an HTML table using my view, the layout is not rendering correctly. Here is a snippet of my view: <html> & ...

htmlcsscodeigniter

What is the best way to securely store a client secret within a JavaScript application?

What is the best way to safeguard a client secret in a JavaScript application in order to ensure it is inaccessible to unauthorized users? Specifically, I am working with an AngularJS SPA. In my case, the client secret is a guid created during login and t ...

javascriptangularjs

Steps to resolve the white-dot border problem plaguing your dropdown menu

On my website, I've designed a drop-down menu with borders set to gray on the top, left, and right sides, while the bottom border is white. This creates a smooth, continuous border that looks great in FF3 and Chrome. However, after upgrading to FF4 o ...

htmlcssborder

Mastering End-to-End Testing in AngularJS with Protractor

I am struggling to extract the last row of a ng-repeat table in Protractor for testing purposes. My goal is to verify that an object created in a previous test run is displayed correctly. So far, I have managed to retrieve all the text in the last row but ...

angularjsangularjs-ng-repeatprotractorangularjs-e2e

Displaying text values with a colored background is a feature of the TextInput component in React Native

Seeking assistance with creating a login screen using React Native, featuring semi-transparent text input. Encountering a peculiar issue where typed text appears highlighted, even though it is not. Please see the screenshot below: (Unable to upload to img ...

ioscssreact-nativetextinput

Resolve the issue of text overlapping on an image when zooming in

There seems to be an issue with overlapping text and images when zooming the page. I have included a screenshot for reference, please take a look and provide a solution. Thank you in advance.https://i.sstatic.net/oVlGN.png Here is the CSS code causing the ...

htmlcssangularbootstrap-4

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

I am working on customizing the chatbot functionality for my website built with Nuxt.js. I want the chatbot to display on certain pages while remaining hidden on others. Unfortunately, I encountered an issue when trying to hide it on specific pages. To im ...

javascriptcssvue.jsdomnuxt.js

Lightbox2 is looking to reposition the caption to the right of the image

Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image? I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and t ...

javascripthtmlcsslightboxlightbox2

Determine the height using jQuery before adding the class

I've been grappling with jQuery to accurately calculate the height of an element and then apply a specific CSS class to adjust its height. The issue I'm facing is that jQuery seems to be executing these calculations out of order, which is causing ...

jquerycss

Tips for achieving comma-separated user input via ngModel and appending it to an array

I am working on an email template that includes a cc option. I want users to be able to add email addresses with commas separating them and then push them to an array called $scope.notifyCtrl.cc. How can I accomplish this using AngularJS 1.5 and above? mai ...

javascriptangularjs

Maintain the fixed placement of an absolute element by adjusting the browser window size

Seeking assistance here - I currently have a box that occupies the entire window. This box is designed to be responsive with a noticeable red border. Within this box, my goal is to insert tables with specific X and Y coordinates. However, my issue arises ...

htmlcss

Checking if the current time is within 45 minutes of a specified time and if the present time is later than the specified time using an

I'm currently learning how to work with 'angularJS' and struggling with creating a function that can determine if a given 'time' is within 45 minutes of now, and also if the 'time' has already passed (meaning, if now is a ...

javascriptangularjs

What is the reason for the index.html file not connecting to the local .css files and .js file?

I'm currently using node.js to send an .html file that includes the following tags: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my personal profile website" /> <link r ...

javascriptcssnode.js

Utilizing the :before pseudo-element in input fields

I'm looking to insert some additional content before the first input field in the provided HTML markup without making any changes to the existing structure. I want to achieve this using the :before pseudo-element. Although I've attempted to do s ...

htmlcss

AngularJS $http.get request failing to retrieve data

I've been delving into AngularJS lately, but I'm having trouble displaying the data from my MySQL database on the view. Here's the code snippets I'm working with: todoController.js angular .module('todoApp') .control ...

javascriptphpangularjs

Step-by-step guide to showing a div upon clicking an element using jQuery

I am facing a challenge with an invisible div that I need to make visible upon clicking an element. However, my current approach does not seem to be working. Can you help me figure out what I am missing? I attempted to target <a class=".demo"> using ...

jqueryhtmlcss

What makes the behavior of (display: flex) similar to that of an inherited property?

One thing that puzzles me is the behavior of the display property in CSS. Why is it that setting {display: flex} for a div will apply this style to all nested p elements within the div? It seems like {display: flex} might be an inherited property, but I&ap ...

htmlcssdisplay

retrieving an array of checkbox values using AngularJS

As a beginner in Angular, I have been struggling to implement a feature where I can add a new income with tags. I have looked at similar questions posted by others but I still can't get it to work. The tags that I need to use are retrieved from a ser ...

javascriptangularjs

Extract the entire div including all its elements and then transmit it using the PHP mail function

Currently, I am developing a feature that allows users to send an email. The email should include only one div from the page which contains elements added using the jQuery drag and clone function. I am unsure how to copy the entire div along with its child ...

phpjavascriptjqueryhtmlcss