title: Why is there such a discrepancy between Chrome print CSS emulation and Print Preview?
body: <p>I have a Bootstrap 3-based site.  Printing out certain pages is important to our customers.  Most of the site prints acceptably, except for the modal dialogs.</p>
  
  <p>I'm trying to use Chrome's (v42.0.2311.135 m) CSS print emulation to improve the print stylesheet.  However, it looks nothing like Print Preview, or what actually comes out the printer.</p>
  
  <p>I want the print version of the modals to cover the whole screen.  Here's what I have so far:</p>
  
  <hr>
  
  <p><strong>Screen</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/5mvOs.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>Print CSS emulation</strong> (looks good, modal takes up whole screen):</p>
  
  <p><img src="https://i.stack.imgur.com/6Y6nQ.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>Print preview / actual hard copy</strong> (completely wrong - modal is small and I can see the rest of the page):</p>
  
  <p><img src="https://i.stack.imgur.com/iA470.png" alt="enter image description here"></p>
  
  <p>Here are the relevant bits of my print stylesheet:</p>
  
  <pre><code>@media print {
      * {
          -moz-transition: none !important;
          -o-transition: none !important;
          -webkit-transition: none !important;
          transition: none !important;
      }
  
      .modal-backdrop {
          background-color: white!important;
      }
  
      .modal.center .modal-dialog {
          width: 100%;
          max-width: 100%;
          height: 90%;
  
      }
  }
  </code></pre>
  
  <hr>
  
  <p><strong>How do I get the Print CSS emulation to resemble the actual printed output?</strong></p>