Chrome print preview different than in DEVTools

Question

I've set up a print stylesheet and in firefox it looks well.

In Chrome the whole page is broken in the print preview (CTRL+P), but if I open the Chrome DEVTools (F12) and use the emulate CSS media function the page looks correct - like in firefox.

The weird thing is, if I open the print preview again, after I've activated the emulate option once, the page looks correct in the print preview! Even If I just activate and then deactivate the emulate option, the print preview is always correct after doing that!

My print.css starts with

@media print { ... }

and is included in the page <head> like this:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

I've tried to remove the media="print" but nothing changes.

score 13 · Answer 1 · edited Jan 18 '19 at 18:39

13

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.

edited Jan 18 '19 at 18:39

DLeh

23,806
16
84
128

answered Jan 19 '15 at 21:36

Ustice

328
3
10

4

Only for media print, I've added this style. If we apply this css in common, this working. If we apply only for media print, then this is not working. Is there any work arround? :-( – Jeeva J Feb 05 '16 at 05:53
@JeevaJsb - I had the same problem. See my answer for a possible workaround. – Nathan Friend Sep 22 '16 at 14:02

score 7 · Answer 2 · answered Sep 14 '18 at 13:36

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.

Thanks for your comment about `col-xs-` this fixed my problem! — DLeh, Jan 18 '19 at 18:47

score 1 · Answer 3 · answered Jan 30 '17 at 09:43

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.

score -1 · Answer 4 · edited May 23 '17 at 12:33

To add to Ustice's answer and Jeeva Jsb's comment: you may need to allow the DOM to rerender after applying the transition: none !important rule. I accomplished this by adding a print CSS class to the body before I programmatically printed the page:

CSS:

body.print * {
  transition: none !important;  
}

JS (using jQuery):

$('body').addClass('print');
setTimeout(function() {
  window.print();
}, 0);

Don't forget to remove the print class once your user has finished printing the page. (See how to detect window.print() finish.)

Chrome print preview different than in DEVTools

4 Answers4