2

I'm using ag-grid along with angular 4. I'm seeing an issue where the paint time in IE11 is WAY higher in different contexts. In one example, I've got a very basic uneditable table with 10 - 15 rows, no scrolling or anything. When I mouse over the table the frame rate starts to drop. Profiling for performance I can see that the paint events happening VERY frequently and take 200 - 400 ms to complete.

Using this same table component in a full screen search modal with over 3000 records, paint events are happening much less frequently and last only a few ms. The longest paint event I saw was around 20ms.

Where do I start with this? What are some of the things I might look for to figure out how the context of an angular component might affect it's paint speed?

instantaphex
  • 981
  • 1
  • 9
  • 20

1 Answers1

2

I was able to find a solution. It turns out that there is a bug in IE11 causing very poor rendering performance on an element with overflow: hidden, and a border-radius > 0. The solution in my case was to remove the border radius from the parent div.

Here is the bug report:

https://connect.microsoft.com/IE/feedbackdetail/view/961961/ie-9-ie-11-divs-with-a-border-radius-and-overflow-other-than-visible-resize-slow-when-filled-with-divs-with-position-relative

Here is another stack overflow post that helped me fix this issue:

How does overflow: hidden; & border-radius on a container cause massive slowdowns to "Paint / Render Layer" within container, only on IE?

instantaphex
  • 981
  • 1
  • 9
  • 20