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.