JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

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

JavaScript

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;