How Does Overflow: Hidden; & Border-Radius on a Container Cause Massive Slowdowns to "Paint/Render Layer" Within Container, Only on Ie

Paint time in IE11

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?

How do I detect IE 8 with jQuery?

It is documented in jQuery API Documentation. Check for Internet Explorer with $.browser.msie and then check its version with $.browser.version.

UPDATE: $.browser removed in jQuery 1.9

The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.

Related Topics