Vfrdtyky

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.

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?

The grid works fine on its own in IE11, my team uses it.
It could be you've added some code that's being executed excessively.

The UI responsiveness tool isn't very useful. Try using the profiler in IE's Dev tools. Open the page with the problematic grid in it, hit the green arrow of the profiler to start recording, scroll the grid a bit and then hit stop in the profiler.

Sort the results by Count, Inclusive time and Exclusive time and see what stands out. After each sort look at the top ~50 entries for code you wrote.

When sorting by Count, you might find a piece of code that while is pretty short, it runs hundreds of thousands of times in a loop for no reason because of a simple mistake.

Sorting by time can show you pieces of code that are very demanding and perhaps could be moved to other places.

For instance, it could be you're running some logic on the view like formatting a date. If you see such a function in the profiler, it would be better to move this logic to the data fetching phase before the view is rendered.

There's an issue with a file named angular-material.css which causes a slow scroll like you describe. I've seen several places, like this one, that state removing the file or several lines in it solved the problem.

Are you using angular in your project? If you do, see if you have this file and try to remove it.

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.