How to resolve extra blank space when printing in Chrome

Viewed 219

When printing from Chrome, my page has extra space between lines - in the middle of a <p>!

Image of discrepancy between print emulation and print preview

The extra space is consistently at the same position on multiple pages, and approx. 80% of a line height.

I cannot debug it, since the CSS print emulation does not have this extra space. Also it prints fine in Firefox and Edge.

Seems similar to this question with no answer: Why am I getting extra line and/or paragraph spacing when printing, despite setting @media print styles?

Similar questions:

Based on these, I have tried adding disabling transitions, forcing line-height and unsetting orphans and widows:

@media print {
  * {
        -webkit-transition:none!important;
        -moz-transition:none!important;
        -ms-transition:none!important;
        -o-transition:none!important;
        transition:none!important
  }
  
  h1, p {
      orphans: unset;
      widows: unset;
      line-height: 1.15 !important;
  }
}

Any tips on how to find the root cause? Image of the print emulation HTML etc.

Here's a gif, showing many different fonts, line spacing, width, etc. All of them have this extra space at the same spot.

2 Answers

just change the value of your line-height to less than 1 or use display:inline-block for p

The issue is caused by the text div being 'relative'ly positioned position: relative; on the page.

You can't change to positioning 'absolute' either, since this breaks printing in Firefox (known bug)

Positioning the two text divs using a grid instead works in all browsers.

Related