Print styles not showing up correctly on macOS Safari Print Preview

Question

Codepen demo

 * { box-sizing: border-box; } body { background-color: #ddd; margin: 0; padding: 0; } main { width: 100vw; height: 100vh; position: relative; }.chrome { width: 100%; padding: 0 32px; left: 0; height: 64px; background-color: #ccc; position: fixed; z-index: 10; display: flex; justify-content: space-between; align-items: center; }.chrome.top { top: 0; }.chrome.bottom { bottom: 0; }.container { padding: 80px 32px; position: relative; z-index: 0; }.paper { background-color: lightblue; margin: 32px auto; }.content { padding: 32px; display: flex; justify-content: space-between; }.portrait { max-width: 210mm; }.portrait.content { min-height: 297mm; } **Print CSS** @page { size: A4; margin: 0; } @media print { body { width: 210mm; height: 297mm; } body * { visibility: hidden; }.chrome { display: none; }.container { padding: 0; }.paper, .paper * { visibility: visible; }.paper { margin: 0; width: 297mm; max-width: auto; } }

 <main> <div class="chrome top"> Render UI Header <button id="print" onclick="window.print()">Print</button> </div> <div class="container"> <div class="paper portrait"> <div class="content"> <div>A4 Portrait</div> <div>Right side stuff</div> </div> </div> </div> <div class="chrome bottom"> Renderer UI Footer </div> </main>

How it looks on Chrome print preview:

Safari print preview:

I have no idea why it isn't working in Safari. Does it not respect print styles like Chrome? Do I have some obscure browser setting that could be mucking it up?

Answer 1

Currently, I had the same problem and I fixed it by using adding margin to the left, I needed A4 format so the sizes were 210x297:

@media print {
    #MainDivThatyouHave{
      padding: 0 !important;
      margin-left: calc(-100vw / 2 + 210mm / 2);
    }
    html, body{
      size: A4 !important;
    }
  }

Instead of 210mm you can use the width you want and I don't think '.important' s are necessary there.

I know it's a bit late answer but if anyone has the same problem in the future, this solution should help.