Safari Print Media Queries not matching other browsers / cutting off - css

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) -
Setting a min-height
Setting any variation of a height value on the container
Zooming out and printing
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.

Answer 3

I've not gotten any answers on here after pointing out the issue in the comments above and mentioning it was a free bounty. Unfortunately I'd love to give the bounty away so anyone that reposts this before bounty expires can have it -
The issue was that the application I am using is a JavaScript app that runs and creates the body of the page that was only about 400px tall. After the body is rendered there is a separate bootstrap modal dialog that was being shown with the content to print and all of the CSS was good and media queries were good but the modals' content was set to larger than the body.
Upon inspection it seems that Safari (and probably other browsers) weren't taking in to account the dialogs height when calculating the height of the body.
Chrome and Firefox were fine with this because it printed all visible content but in Safari it only prints content that is as tall as the body, which in this case was about 30% of the modal. By manually triggering the body to be min-height: 1200px; it resolved the issue since that was the maximum possible height of the Bootstrap Modal dialog's content.