Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 260
Keith L. Avatar asked Sep 24 '14 07:09

Keith L.


People also ask

How do you inspect element in print preview?

As of Chrome 48+, you can access the print preview via the following steps: Open dev tools – Ctrl/Cmd + Shift + I or right click on the page and choose 'Inspect'. Hit Esc to open the additional drawer.

How do I enable pretty print in Chrome?

Yes! This has become available: In Dev Tools: ⋮ > Settings ( F1 ) > Experiments > Automatically pretty print in the Sources Panel .


1 Answers

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.

like image 113
Ustice Avatar answered Sep 28 '22 05:09

Ustice