Large HTML tables are slow to scroll in Chrome

Question

So I've discovered some peculiar behavior in Google Chrome today.

When you place a table which contains tens of thousands of rows within a fixed height div (forcing it to scroll when there's enough data), it scrolls realllly slowly. With 10,000 rows it's pretty sluggish, with 100,000 rows it's almost unusable. However, on Firefox and IE the table scrolls normally no matter the amount of data.

I've made a plunker for your quick viewing pleasure. You can adjust the amount of data that's generated and see for yourself how the browsers respond.

https://plnkr.co/edit/3jvTtbk6B837uJsXiP2e?p=preview

It is also important to note that this is not an issue when the div is allowed to extend past the edge of the screen. It's only when the max-height and overflow: scroll CSS properties are set on the div that this happens.

Has anyone else experienced this? Is this a known issue? Thanks!

EDIT: clarity

Answer 1

I can confirm your observation: Looks like IE and Firefox are doing some optimized rendering (presumably by using the hardware acceleration) but Chrome isn't.

And I have to disagree with other answers, stating that you simply must use smaller tables, because the Chrome slowdown comparing to other browsers is observable with even smaller tables with only a few hundred rows but more complex content.

You can force Chrome to use optimized rendering here by using

transform: translate3d(0, 0, 0);

See Sluggish scroll behaviour of large(ish) html table in Google Chrome