Thomas Andrews Thomas Andrews - 2 months ago 42
CSS Question

Chrome printing bug - wrongly printing table headers at top of page

With the latest version (53.0.2785.116) of Chrome, on Windows and Mac, we've hit a nasty bug that we can't seem to work around.

We are seeking workarounds that do not involve editing the HTML text, so CSS or Javascript answers might do.

We are getting text at the top of pages other than the first that looks like:

enter image description here

This is an overlay of a paragraph, and two different table headers for tables that occur later on that page. (Where the headers again are printed.)

You can find a full example page here.

We've already reported this to Google, of course, but we were wondering if anybody could think of a workaround to get our customers printing again. We can't change the HTML, but we can change the CSS, or possibly use Javascript. (Removing the thead tags appears to solve the problem, for example, but that solution does not work for us because we can't change the HTML.)

The code is simply:

<!DOCTYPE html>
<html><head>
<title>Broken Printing</title>
</head>
<body>
<h1>Printing Issue 9/29/2016</h1>
<p>Lorem ipsum for page break</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<table>
<thead><tr><th>Survey</th></tr></thead>
<tbody><tr class="odd"><td>The Foundation 2016&nbsp;</td></tr></tbody>
</table>

<table>
<thead><tr><th>Year</th></tr></thead>
<tbody><tr><td>2015</td></tr></tbody>
</table>

</body>
</html>


Addendum: This is Chrome issue 631222, and is reported to be fixed in a release scheduled for the end of October, 2016.

Answer

We have a workaround:

@media  print {
    thead { 
        display: table-row-group 
    }
}

This loses a feature we don't need much in our reports - repeating of table headers at page breaks - so it is sufficient for us, and is easily removed when Chrome gets fixed.