Chrome print preview different than in DEVTools

In your print style sheet, you need do add the following:

* {    transition: none !important;}

It appears that Chrome doesn't disable the transition property for print media.

Here is where I found the answer.

If you have not find solution in given answers then i have something to say about it:

in Chrome DEVTools print option in emulation css media is only for applying print css rules to the page, for testing purpose, it does not account for all the other things that go along with print, it display the print preview but sometimes it do not display the print page as actual print preview.

if you are using bootstrap then if you are using only col-md-* or col-sm-* it will not work, but if you use col-xs-* then it will work because The issue is that the page itself is small in terms of pixels, so bootstrap thinks it needs to apply the xs style.

And different browser behaves differently in printing the page.The only optimal way to test print is by actually printing, or printing to pdf.

I ran into the exact same head breaking problem and I've been able to fix it.

In my case the problem was caused by using a custom @font-face for the 'print' CSS which i did not use in the 'screen' CSS.

It seemed the browser dit not load the custom @font-face from the print stylesheet for the first preview and renders the page more or less empty. It would render perfectly on the second print preview.

My solution was to load the same @font-face rule from the pint css also in the screen css. That way the font is loaded already by the browser when viewing the print preview and it all works like a charm.