Chrome Print Styles – vertical space weirdness bugs

I recently worked on a fairly elaborate print stylesheet. Printing from the chrome browser had some patches of vertical white space not seen with other browsers. The way I tested (from a mac, windows is almost the same) was to

  • go to web page
  • top menu > print
  • either print (without changing defaults)
  • or PDF > save as PDF – I found that actually printing and saving as PDF following this method yielded identical pages. I only tested on one printer.)

This post had some suggestions that helped.

The things that helped the most were

Remove (display: none) :before and :afters. These showed up when printing from Chrome but not from other browsers. These pseudo elements (:before, ::before, :after, ::after) were taking up space. These are often used in popular frameworks such as bootstrap for clearfixes.

The other advice that helped a lot was to look at other media queries. I was looking at my browser window at normal width but the print styles were using extra small screen size rules. Other browsers were not printing with extra small screen rules. Once I made my browser skinny I could see where many of the problems were. By the way, chrome and other browsers’ developer tools have settings for inspecting for print styles.