Weird rendering behavior on IE11 + Angular 1.5.11

Question

We're currently developing an application in Angular version 1.5.11. It has become quite big now (hundreds of controllers etc.), and we stumbled upon an issue in Internet Explorer 11:

After some time (sometimes few minutes, sometimes few hours) the page starts to have rendering glitches - the letters are fading/disappearing/changing color. It also affects other tabs opened in the same window (screenshot from the Excel Online having the same issue). Also, there are no errors in console.

Did anyone come across similar issue? Also, "just using a normal browser" is not a viable option due to client's requirements.

Restarting the browser helps, but it's more of a workaround than an actual solution.

---

Application tab (it appears on every element of the page as well, cropped for visibiltity):

Excel Online tab on the same browser:

Answer 1

I suspect that this issue might be around the browser memory leak (considering that other tabs are also getting affected).

We had issues around memory leaks only in IE browser with Angular 1.3 (not the exact issue).

While this link might help you with further investigation, I'll mention how I used IE's memory profiling tool to help myself. This memory profiling tool can be found in IE 11 dev tab.

1. Click Start Profiling.
2. Take a heap snapshot of your web app without performing any operation on your app.
3. Perform some operation and take a heap snapshot again.
4. Go back to the home page and see if some of the memory you allocated is getting freed or not.

Each heap snapshot also provides a deeper look into the objects allocated and how much memory each object is consuming.

I am attaching a snapshot for reference.