@media print not working properly in Chrome

Question

Have found/read/tried many answers on this so sorry if the solution has already been posted but Chrome is not displaying print styles correctly with many elements missing (but not all).

Here's how things are set up.

1. SETUP

• Print styles are set at the end of the main css file using @media print

• There is no media attribute on the link which loads the css file

• We’re declaring !important on all print styles

• The print styles override the screen styles where needed (i.e. the screen styles are not wrapped in @media screen

• Print emulation in Chrome Dev tools displays print styles perfectly

• But some elements disappear when printing (and/or print to PDF)

• Issue occurs if using the print HTML button or ‘Print’ from the file menu

• This issue does not occur in Firefox or Safari

---

2. TROUBLE SHOOTING

• Print styles were wrapped in @media only print {}

• So tried removing ‘only’ like this @media print {} but no difference

• If I incorrectly move ‘only’ to be after ‘print’ like this @media print only {}

• Then some of the missing print elements display but others disappear

• As noted elsewhere, tried this hack at the start of the print styles but no luck

  * { -webkit-transition: none !important; transition: none !important; }

---

Any help or suggestions would be welcome.

Cheers

Ben

Answer 1

This problem is caused by the CSS declaration display: inline-block on your main content container class, presenter-notes__main-content.

An inline-block is essentially a block element on the inside and an inline element on the outside. An inline element is unbreakable in print unless it's line wrapped, in which case page breaks can only occur between lines. That prevents individual lines of text from getting split horizontally by page breaks, which would make the printed document very hard to read. An inline-block is never line wrapped (that's because its content wraps instead of the element itself), and thus is always unbreakable.

So, what happens when you have an element that's too large to fit on a single page, but can't be split across multiple pages? Crazy stuff, that's what! Sure, some browsers may degrade gracefully and just clip the overflow, but others may get confused and remove the element altogether. Computers aren't great at dealing with paradoxes.