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

Question

I am trying to create a large HTML table (around 5000 rows) with scrollbars and so I thought about inserting that table inside a <div> which I could then format as I pleased.

It works well in Firefox 47 and in IE 11 but has a sluggish behaviour on scroll in Chrome 59.

WORKING DEMO

<!DOCTYPE html>
<html>
    <head>
        <title>Test page</title>
    </head>

    <body>
        <div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div>
        <script>
            let table = '<table style="table-layout: fixed; width: 3000px">';
            table += '<thead>';
            table += '<tr>';
            for(let i=0; i < 30; i++) { 
                table += '<th style="width: 100px">#' + i +'</th>';
            }
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
            for(let i=0; i < 5000; i++) { 
                table += '<tr>';
                for(let j=0; j < 30; j++) { 
                    table += '<td>r: '+ i +' || c: '+ j +'</td>';
                }
                table += '</tr>';
            }
            table += '</tbody>';
            table += '</table>';
            document.getElementById('test').innerHTML = table;
        </script>
    </body>

</html>

However if I just add the table to the document body, the scroll behaviour is smooth across the 3 browsers I've tested (but I could only observe this behaviour while running the code in my local dev. server; if I append the table to the document body in a JSFiddle the sluggish behaviour of Chrome reappears).

My question is what may be causing this sluggish behaviour of Chrome and what can I do to get a smoother scrolling table?

*Edit: I've removed the style="position: relative" from the <td> in the codeblock because that's how I've done in the Fiddle. I was experimenting with that style because I've noticed that IE tends to get sluggish on scroll when the table elements are positioned relatively. My ultimate goal is to create a large html table with a fixed/frozen header that has a scrollable body with a large number of rows.

Having the same issue with Chrome (64), while there is no problem with FF and Edge. However, adding "overflow: scroll" to the outer div - like in your example - solved the issue. Anyway: take a look at slickgrid, maybe just what you are looking for. — Martin Meeser, Feb 28 '18 at 20:45

score 4 · Accepted Answer · answered Jul 18 '17 at 09:08

Try to add transform: translate3d(0, 0, 0) to the table. An example is given below. That trick is getting old, however. Postings about it reach back to 2012 already. For instance, see this posting.

Currently, browsers [...] ship with hardware acceleration; they only use it when they have an indication that a DOM element would benefit from it. With CSS, the strongest indication is that a 3D transformation is being applied to an element.

In my company, we use it for almost every larger list. Mostly, it works fine. Another solution would be virtualization.

let table = '<table style="table-layout: fixed; width: 3000px">';
table += '<thead>';
table += '<tr>';

for(let i=0; i < 30; i++) { 
  table += '<th style="width: 100px">#' + i +'</th>';
}

table += '</tr>';
table += '</thead>';
table += '<tbody>';

for(let i=0; i < 5000; i++) { 
  table += '<tr>';
  for(let j=0; j < 30; j++) { 
    table += '<td>r: '+ i +' || c: '+ j +'</td>';
  }
  table += '</tr>';
}

table += '</tbody>';
table += '</table>';
document.getElementById('test').innerHTML = table;
document.getElementById('test2').innerHTML = table;

#test {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

<h2>With translate3d</h2>
<div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div>
<h2>Without translate3d</h2>
<div style="width: 400px; height: 300px; overflow: scroll;" id="test2"></div>

(or full snippet)

Sorry for the delay, I've been reading about what virtualization is and I've been trying to correctly implement it. It makes a big difference in my document performance. Here is a [**WORKING DEMO**](https://jsfiddle.net/ddqw6tg3/3/). Nevertheless my spreadsheet element only scrolls smoothly if the user drags the scrollbar or if he uses the mousewheel while hovering the fixed columns (first 10 in the demo). But this behavior is not consistent across the 3 browser I've tested. Only Chrome allows a smooth scroll with the mousewheel. — Moaning Neighbors, Aug 08 '17 at 13:03
I am sorry but I have to downvote on this for two reasons: 1) In your answer you are saying "Try to add transform: translate3d(0, 0, 0) to the t a b l e.". But dude, you are adding it to the table's parent div! (copied from somewhere?) 2) The transform is n o t doing the trick, the overflow: scroll is (at least with Chrome 64). — Martin Meeser, Feb 28 '18 at 20:39

score 0 · Answer 2 · answered Jun 28 '19 at 09:56

0

Had the same problem. Chrome Update Version 75.0.3770.100 (64-Bit) solved it for me.

answered Jun 28 '19 at 09:56

Farley

179
1
13

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

2 Answers2

Linked