Google Chrome handling page breaks differently on different computers

Question

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:

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 class="row page-portrait">
  <div class="row header">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row footer">...</div>
</div>

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

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

Answer 1

I can't help with the odd wifi issue... But as for consistent sizing, you should make sure that ALL your measurements are in printer-friendly units.

My guess is that you're getting extra space because each OS/Machine is interpreting px and percent differently when it goes to print.

This is especially true for font-size which is likely different based on how screen density is converted. Which in turn causes your page-break and wrapping rules to be in different places. That generates different spacing.

Try specifying font-size in pt and width/margin in cm or mm

For example you have this rule:

.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);
}

I would change to:

margin-top: 1cm;
margin-bottom: 1cm;
width: 210mm;

Also font-size: 10px probably translates to font-size: 8pt but you'll need to play with that sizing to get it correct.

Answer 2

You have to learn how to add css so that it works on both WiFi network. Make sure you add your css in relative form.

<link rel="stylesheet" type="text/css" href="mystyle.css"> and not http://acx/we.css. Make sure it is internal css. Sometime when you use external css and you have different connection WiFi and LAN your company security changes. So based on path company might block css. Check traffic log under network in Developer tools in Chrome.Check for 401.check css getting overridden also under elements in Chrome developer tools.

Answer 3

One reason could be that the machines have different zoom settings, for example, laptops often have 125% zoom, which affects the browser. The way to handle it would be to make it look good in 125% zoom and then you wind up with a bit of space on 100% zoom, but you'll see a lot of sites already work like this.