title: @media print not working properly in Chrome
body: <p>Have found/read/tried many answers on this so sorry if the solution has already been posted but Chrome is not displaying print styles correctly with many elements missing (but not all).</p>
  
  <p>Here's how things are set up.</p>
  
  <p><strong>1. SETUP</strong></p>
  
  <ul>
  <li><p>Print styles are set at the end of the main css file using <code>@media print</code></p></li>
  <li><p>There is no media attribute on the link which loads the css file</p></li>
  <li><p>We’re declaring <code>!important</code> on all print styles</p></li>
  <li><p>The print styles override the screen styles where needed (i.e. the screen styles are not wrapped in <code>@media screen</code></p></li>
  <li><p>Print emulation in Chrome Dev tools displays print styles perfectly</p></li>
  <li><p>But some elements disappear when printing (and/or print to PDF)</p></li>
  <li><p>Issue occurs if using the print HTML button or ‘Print’ from the file
  menu</p></li>
  <li><p>This issue does not occur in Firefox or Safari</p></li>
  </ul>
  
  <hr>
  
  <p><strong>2. TROUBLE SHOOTING</strong></p>
  
  <ul>
  <li><p>Print styles were wrapped in <code>@media only print {}</code></p></li>
  <li><p>So tried removing ‘only’ like this <code>@media print {}</code> but no difference</p></li>
  <li><p>If I incorrectly move ‘only’ to be after ‘print’ like this <code>@media print only {}</code></p></li>
  <li><p>Then some of the missing print elements display but others disappear</p></li>
  <li><p>As noted elsewhere, tried this hack at the start of the print styles but no luck</p>
  
  <p><code>* {
      -webkit-transition: none !important;
      transition: none !important;
  }
  </code></p></li>
  </ul>
  
  <hr>
  
  <p>Any help or suggestions would be welcome.</p>
  
  <p>Cheers</p>
  
  <p>Ben</p>