Search code examples
cssinternet-explorerkendo-uiinternet-explorer-11kendo-asp.net-mvc

Slow performance of Kendo Grid in IE11

I've been using latest Kendo grid for ASP.NET MVC.

Data table specs are like this,

columns --> 25 to 35.

rows --> anywhere between 1500 to 5000.

client side paging --> 20 rows

Issue is, when I'm doing the scrolling, IE 11 takes upto 1s to display data depending on screen resolution and grid content height. Which causes the UI glitch.

When I ran IE UI Responsiveness from Dev Tools, I got the below results.

enter image description here

I get that whenever user does scrolling, browsers have to render the rows and it takes a bit time. But IE 11 takes it to a whole new level. The moment it has to process 3-4 more rows, it starts acting jumpy and glitchy.

I did the testing in Chrome (& opera), Firefox. In which performace was very decent.

I tried to refractor CSS to reduce styling, but there's very little bit change I could afford.

Please let me know what is the next step? Should I keep calm and blame IE?

Solution

  • Because this question crossed 1000 views, I'm obliged to answer on how I fixed my issue.

    Turns out, rendering of IE is slow when it comes to bigger screen of HD/FHD resolutions. So, the solution I followed was to promote the grid to new layer by adding the following to grid's CSS class.

    .promote-new-layer{
    transform: rotate(0deg);
    will-change: transform;
}

    will-change might not work in all the browsers. Hence the fallback would be to use transform:rotate(0deg).

    Please ensure while doing so, you are not promoting unnecessary nodes.