CODEWITHSUNDEEP
cssangularjsperformanceinternet-explorer
JVG
JVG

Reputation: 21150

IE "Style Calculation" performance incredibly slow in AngularJS app

I have an AngularJS app using Angular Material and data loaded from an external API.

THere is nothing particularly groundbreaking with this app, and all of my tests run absolutely fine in Chrome, Firefox and Safari.

However, when I use Internet Explorer, all hell breaks loose. The app is incredibly slow, CSS animations are painfully laggy, the app is completely unusable.

I've spent the day trying a number of potential bugfixes and debugging, but I'm coming up trumps.

Things that I can see:

Here's the output from the performance inspector, when literally all I do is scroll down an md-virtual-repeat:

IE Performance: Style Calculation

As you can see, style calculation is taking up a whole lot of time here.

Googling has come up trumps with workarounds for this. What's going on here? Is this a red herring, and the issue is somewhere else in my app (my JS is as efficient as I can think of making it, and I've also tested loading in no real data, just 30 static objects into the virtual repeater - and results are the same).

Upvotes: 12

Views: 5567

Answers (2)

Yuriy Manoylo
Yuriy Manoylo

Reputation: 111

I've had the same problem with a "Style Calculations" taking about 700ms while scrolling and loading CPU to 100% (IE11, Win10)

In my particular case it was caused by the CSS rule that contained a "+ " selector, e.g.

.menu li + li a {border: 0}

After removing it - works fine.

Hope it saves someone couple of hours.

Upvotes: 2

Guðmundur Karl Karlsson
Guðmundur Karl Karlsson

Reputation: 66

The solution, as @ngDeveloper points out in a comment is to upgrade ngMaterial. I had this problem, and it was positionElements that was causing the problem for me.

Upvotes: 1

Related Questions