#StackBounty: #html #css #google-chrome #print-css Google Chrome handling page breaks differently on different computers

Bounty: 100

I am finalizing a print stylesheet for a rendered report in a web application and have been notified of some printing issues on different machines. When adding a page break before my header, I am noticing a ton of added white space, which seems tied to the page break. When I add background-color: green, etc. to the headers or footers of the page, the white space is clearly not due to either. My Windows 10 OS machine and a Mac OS I have as a back-up both create a print preview document that honors the page breaks as I would expect, but another machine running Windows 10 shows the added white space.

UPDATE – One of the machines that is experiencing the issue with page breaks is only experiencing the problem on particular WiFi connections. When connected to the WiFi at my working location, the problem seems to disappear from his machine, but when connected to the WiFi at his working location, the problem arises again. Very bizarre….

I am applying page-break-before: always to my header content and my website code is as follows:

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

* {
  box-sizing: border-box;
}

.page-portrait {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  position: relative;
  width: 1350px;
  min-height: 279mm;
  padding: 30mm;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.report-row-preview {
  min-height: 4cm;
}

.header {
  margin-top: 1cm;
  page-break-before: always;
}

.footer {
  margin-top: 1cm;
}

.copyright {
  text-align: center;
  font-size: 10px;
  margin-bottom: 0;
}

@media print {
  html,
  body {
    width: 216mm;
    height: 279mm;
    background-color: white;
  }
  .page-portrait {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: 4%;
    width: 100% !important;
  }
  .no-print {
    display: none !important;
  }
}
...
...
...
...
</div>

Finally, here is a screenshot of the added white space that I am referring to:

enter image description here

Happy to provide anymore clarity as necessary, I’m just banging my head against the wall with this.


Get this bounty!!!