Dfyjkt

Ever since upgrade to chrome v70.0.3538.77, my domain users have been having issues with the rendering of tables when a CSS column-count: 2 is applied.

When scrolling a table within a fixed height div, the scrolled area remains unrendered (white). When the browser window is resized, the content gets redrawn and the content appears as it should have been rendered during scrolling.

The following fiddle demonstrates the issue, make sure to set screen width large enough for the "one" and "two" tables to appear next to each other.

The issue is demonstrated here: https://jsfiddle.net/L2z4srwp/1/

After scrolling the first table (notice the unrendered rows bottom left):

After subsequently resizing the browser window (notice the rows get redrawn):

Here's the CSS giving issues:

div.multiColumn 
 -moz-column-count: 2;
 -moz-column-gap: 1rem;
 -webkit-column-count: 2;
 -webkit-column-gap: 1rem;
 column-count: 2;
 column-gap: 1rem;
 padding: 0em;

And the HTML

<div class="multiColumn" id="divMultiColumn">
 <ul class="noBullets" id="ulMultiColumn">
 <li>
 <h3>One</h3>
 <div class="scrollingTableDiv">
 <table class="teStartenTabel scrollingTable" id="id5be42585873c8">
 <tr>[Lot's of rows]</tr>
 </table>
 </div>
 <script>document.getElementById("id5be42585873c8").dataset.scrollBeyond=15;</script>
 </li>


 <li>
 <h3>Two</h3>
 <div class="scrollingTableDiv">
 <table class="teStartenTabel scrollingTable" id="id5be42585873c89">
 <tr><th>Datum</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah.</th><th>Blah</th></tr>
 <tr>[Lot's of rows]</tr>
 </table>
 </div>
 <script>document.getElementById("id5be42585873c89").dataset.scrollBeyond=15;</script>
 </li>
 </ul>
</div>

With javascript:

 <script> 
 function makeTablesScroll() 
 $(".scrollingTable").each(function() 
 var table = this;
 maxRows = parseInt(this.dataset.scrollBeyond) + 1;
 var wrapper = table.parentNode;
 var rowsInTable = table.rows.length;
 var height = 0;
 if (rowsInTable > maxRows) 
 for (var i = 0; i < maxRows; i++) 
 height += table.rows[i].clientHeight;
 
 wrapper.style.height = height + "px";
 
 );
 
 </script>

Any solutions or workarounds? I have resorted to flexbox css dev version, but that creates a raster with rows and whitespace if the left table takes up more height than the right table. The column strategy neatly balances both columns and aligns object straight beneath eachother irrespective of the height of objects in the other column.

For reference, I added a Chromium bugreport: https://bugs.chromium.org/p/chromium/issues/detail?id=903287