@media print doesn't work as expected in Chrome
You found / read / tried many answers to this, so sorry if the solution is already posted, but Chrome does not display print styles correctly as many elements are missing (but not all).
Here's how things are set up.
1. INSTALLATION
-
Print styles are set at the end of the main css file with
@media print
-
There is no media attribute in the link which loads the css file
-
Declared
!important
for all print styles -
Print styles override screen styles where appropriate (i.e. screen styles are not wrapped in
@media screen
-
Print emulation in Chrome Dev tools renders print styles fine
-
But some elements disappear when printing (and / or printing to PDF)
-
Issue occurs when using HTML button to print or "Print from file" Menu
-
This issue does not occur in Firefox or Safari
2. TROUBLESHOOTING
-
Print styles were wrapped in
@media only print {}
-
So I tried to delete 'just like this
@media print {}
, but no difference -
If I am wrongly moving "just to be after", print it like
@media print only {}
-
Then some of the missing print items show up, but others disappear
-
As mentioned elsewhere, tried this hack at the beginning of print styles but no luck
* { -webkit-transition: none !important; transition: none !important; }
Any help or suggestions would be greatly appreciated.
Greetings
Ben
source to share
This problem is caused by the announcement CSS display: inline-block
in your main contents of the container presenter-notes__main-content
.
An inline block is essentially a block on the inside and an inline on the outside. An inline element is indestructible in print unless a line is terminated, in which case page breaks can only occur between lines. This prevents individual lines of text from splitting horizontally into page breaks, making the printed document difficult to read. An inline block is never tied to a string (that's because its content is wrapped instead of the element itself) and is therefore always indestructible.
So what happens when you have an element that is too large to fit on a single page, but cannot be split across multiple pages? Crazy what! Of course, some browsers can degrade gracefully and just fix the overflow, but others can get confused and remove the element entirely. Computers can't deal with paradoxes.
source to share