Safari Print Media Queries not matching other browsers / cutting off

Question

I have a web app that looks fine when rendered in Safari but the print media queries are not being respected by the browser. In Chrome the entire printable area looks fine, however in Safari it appears to be only some variation of visible content.

When scrolling down on the page the header or top area is cut off, when printing higher on the page the bottom is cut off.

I've tried the following for the print media queries (with no effect) -

1. Setting a min-height
2. Setting any variation of a height value on the container
3. Zooming out and printing
4. Changing resolution / scale

Nothing appears to have any effect at all.

Unlike Chrome, I can't find a way to debug why it is happening nor a way to debug the print styles themselves.

Note - I am using Bootstrap for styles so there are containers, rows, spans, etc... but even removing them completely and everything being on it's own line makes no difference, the same "height" of the content is shown on print.

Answer 1

I've had many issues with cross browser print media queries in the past. What helps a lot with regulating the visual is setting a fixed page size and html/body.

For instance:

@media print {
    @page {
        size: 1600px;
    }

    body,
    html {
        width: 1600px;
    }
}

Answer 2

In my case setting body to it's original A4 width -> width: 210mm and height: 100% fixed the problem.

I've been working with modified version of PDFJS viewer from PrimeFaces and here is a snippet that did the trick in Safari:

@page {
    size: A4;
    margin: 0;
}

html, body {
    width: 210mm; // A4 Paper width
    height: 100%;
}

note: The issue was in incorrect pdf document scaling while previewing and then printing docs. FF and Chrome were fine.

Hope it helps somebody, who uses PDFJS extension from PrimeFaces.