Inexplicable margin between elements on print in Chrome, but not in Firefox

Question

I'm trying to print a pdf report by first generating it as a normal website with php, html and css. The report is nearly complete, there's just one more thing I'm trying to fix: there is an unexplainable whitespace / margin when printing the page on Chrome, whilst printing it on Firefox (developer edition) works fine.

Here's the link to the page that gets printed: https://aquadynamica.be/verslagen/api/verslagen/stackprintexample.php?verslagId=44

Please try printing (CTRL + P) and scroll down a little.

Examples: Page 4 on chrome (As you can see the margin is there on chrome.):

Page 3 on firefox:

On page with emulate css mediatype print

As you can see there is a margin when printing on chrome, but it's not there on firefox...

I've already checked out the following article: Inexplicable empty space on print from Chrome

However, increasing the page size with a few milimeters doesn't help, nor adding it to the margin (as you can see when using devtools on the URL, I've tried that). I've also checked if I set both the width and height somewhere which could cause the ratio to be forced, hence causing margins, but that doesn't seem to be the case or I missed something.

I was thinking of a few possible solutions:

1. Find a way to be able to use devtools when emulating the print (I tried rendering > emulate css media type > print, but that doesn't show the site divided into pages, which is what I need to be able to debug the spacing as it's not there when emulating css, only on actually printing.)

2. I'm using this api to render the html page into a pdf document. Is there a known alternative that uses a headless firefox installation rather than chrome? (I'm running it on Heroku)

Thanks in advance for your assistance. I hope the description of my issue is clear. If not, please don't hesitate let me know and I'll happily edit my question.

Kind regards, Jonas

Answer 1

Running Chrome or its derivatives such as Edge has a default margin of 1 cm (~0.4 inches) this is documented in the code and thus --headless will use that value so attempting an unlisted switch such as --no-margin or --no-margins is meaningless and does not work.

Similarly default for --print-to-pdf is always portrait, never landscape.

Either you need to drive user printing with default margins set to none or you need to control the api direct via several methods to over-ride the default 1 cm. It is possible to do this with css styling. Here the page margins and size are over-riding the default setting

<meta http-equiv="Content-Style-Type" content="text/css"><style>
@media print {
  @page {
    /* For different margins – use the standard CSS margin property: north, east, south, west, here it is one value */
    margin: 0;

    /* Browser default, customisable by the user if using the print dialogue. */
    size: auto;

    /* Default, In my instance of Edge, this is a vertical or horizontal A4 format, but you might find something different depending on your locale. */
    size: portrait;

    /* Different width and height. here using stated width="529" height="265" can be px or pt or cm. For square, just use one value or use name like A6 landscape; note this is over-riding both above size: */
    size: 529px 265px;
  }
  body { margin: 0; }
}
</style>

So any one of above can upset any previous setting thus last cascading man standing usually takes precedence. Therefore it seems yours are not cascading correctly, but source is too tangled to tell why.

If I replace the media print section with a much simpler one it removes all that double bagging on the left.

FireFox uses a very different PDF rendering model (images and text) thus currently cannot run headless.

Simplest for full control with ALL heads up browser(s) and there are more than two brands (so device results can also vary widely), is use a send-keys string emulating highly variable device user choice of print engine, page size, orientation, number of pages, margins, backgrounds, etc. etc, starting with Ctrl+P and ending with confirmation.