Firefox's Prinout Issue

OK guys… another headache requiring massive doses of aspirin:
I’ve been researching this issue for over two years but have not even come close to finding a solution - and no responses from BugZilla or Mozilla Community Support either. The problem I’m having is that Firefox often truncates my webpages by scrunching two pages into one when I printout. No setting in Firefox, forced HTML page breaks, or CSS ‘trick’s work. This doesn’t happen in Chrome, Edge or Safari - just good ol’ Firefox so I’m convinced this is a bug in Firefox (I’m currently using version 89.0.2 for the Mac).

Has anyone in this forum experienced a similar bug and found a solution? Please see my attached graphics for a better understanding of what’s happening. If anyone has found a solution, I’m betting it’ll be someone in this group… :cry:

Hi @randyrie,
Can you share the site you are trying to print?

Visit the website page via Firefox: Newsletter - click on the “Print” button. I have the issue using Firefox on macOS and iOS but don’t know how the printout looks on a Droid device. As an aside, this issue does NOT happen in other browsers - just Firefox.

Let me know your experience?

Hi @randyrie,
Firefox printing seems really broken! Anyway, the only thing that I’ve seen that partially fixes your problem is to eliminate flex in your print layout. So basically, a media query for print @media print{} and then set your .row to display: block;. You can add some extra styling to keep your two column layout, but at least things won’t overlap.
Let me know if this works out for you.

I always start by trying to validate the HTML. I wouldn’t rely on Pinegrow’s tool for that. Maybe see if fixing the errors helps.

Thanks @RobM for your response. I tried quite a few html page break codes and found that placing a page-break-before div tag ABOVE the row where I want the page to break works in Firefox.
e.g. :

1 Like