CODEWITHSUNDEEP
cssgoogle-chromeprintinggoogle-chrome-devtools
Keith L.
Keith L.

Reputation: 2124

Chrome print preview different than in DEVTools

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.

Upvotes: 23

Views: 10538

Answers (4)

Ustice
Ustice

Reputation: 328

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.

Upvotes: 13

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6272

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.

Upvotes: 7

Wim de Ruijter
Wim de Ruijter

Reputation: 111

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.

Upvotes: 1

Nathan Friend
Nathan Friend

Reputation: 12804

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.)

Upvotes: -1

Related Questions