Print preview significantly different from Inspector in Chrome?

Are you having issues with the Chrome print media emulator showing different results from print preview? Here’s how I solved this problem.

In the emulator, my styles were showing just fine, but despite all the !important rules in the world, nothing would work in print preview. It turns out the print preview will display your page before CSS transitions are applied, so if there’s a transition when some elements are moved, print preview will show them before that transition. This is especially tricky if you use CSS transitions for columns, responsive design, slide out menus etc.

Adding *{transition:none!important} in the print stylesheet fixed it for me.

8 comments on “Print preview significantly different from Inspector in Chrome?

  1. Found another culprit. If you use responsive frameworks, like Bootstrap and Foundation, they declare @media print. For me, this has had the unintended effect of completely butchering my print preview.

  2. Adding to above comment, I moved all @media prints styles from bootstrap.css into a new file named bootstrap-media.css, and then gated it with media=”screen”. My print.css, now gated with media=”print”, is the ONLY print CSS file on the entire site. It functions as expected without any interference from Bootstrap’s framework.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see