IE "Style Calculation" performance incredibly slow in AngularJS app

Question

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:

• When I use IE11's Developer Tools and run a performance log, "Style Calculations" take up, by far, the most amount of time.
• When I have wildcard CSS selectors performance is slower (like *{box-sizing: border-box})

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

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).

Answer 1

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.