Safari Print Media Queries Not Matching Other Browsers/Cutting Off

Safari do not print Check Form properly where as Chrome does

For printing always use PDF format if precise format matching is required:

On the workstation where it prints correctly, open the PDF and go into the print page setup then take note of all page settings, paper size, margins etc.. ask your technician to access page setup if you can't:

Be wary of any settings in page setup that attempts to resize the PDF before sending it to the printer:

Configure page setup (sometimes called print option) on Safari browser and macOS to match those that print successfully.

Links below are good starting points but actual configuration is dependent on OS and browser version. It's also out of scope of StackOverflow because it isn't a programming question. If you need help on configuring printers in Safari/MacOS and don't have a technician to do it, it would be better you ask on another stackexchange site, perhaps SuperUser would be the most appropriate:
https://support.apple.com/kb/ph25622?locale=en_US

https://support.apple.com/kb/PH21472?locale=en_US

Media Queries firing at wrong width

A common reason this happens is if you have zoomed the browser window to a size other than 100%. In your browser, select the drop-down menu 'View' and make sure it is set to 100%. If you are zoomed in or out, it will trigger media-queries inappropriately.

And don't worry about feeling embarrassed. It has probably happened, or will happen to everyone.. but only once.

---

In order to avoid this issue all together, you should considering defining your media queries using a relative units (em or rem rather than px).

---

You can also enforce setting the browser zoom level to 100% on page load using javascript.

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

@media print doesn't override main style

Oddly enough, the issue can be resolved in Chrome by removing the transition within the print media query:

Example Here

@media print {
    #sidebar { display: none;}
    #container {
        margin-left: 0px !important;
        padding: 0px !important;
        transition: none;
    }
}

Without removing the transition, you can reproduce the issue here. Perhaps this is a rendering bug?

---

Related Topics