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.
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.
Yes! This has become available: In Dev Tools: ⋮ > Settings ( F1 ) > Experiments > Automatically pretty print in the Sources Panel .
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With