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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With