Firefox printing only 1st page

Firefox Problem Overview

I'm working on print friendly css for a website. It previews/prints perfectly in IE, but Firefox (version 3.6) only previews/prints the 1st page.

Is anyone aware of anything that would generally cause this? The markup is fairly complicated, so I'm not sure where to start!

Thanks.

Edit

This solution only made things worse.

https://support.mozilla.com/ga-IE/questions/667285#answer-115916

Looks like printing just sucks in FF. Client won't like to hear that - hopefully they don't use FF!

Firefox Solutions

Solution 1 - Firefox

I just found out, that from an element with

display:inline-block;

only the first page is printed and everthing else is hidden. setting this to

display:block;

was the solution in my case.

Solution 2 - Firefox

I was having the same issue. Turns out, the root tag had display: flex on it. After changing this to display: block, the rest of the content was displayed. I'd recommend going up your DOM tree and checking every display attribute.

Solution 3 - Firefox

If you don't want to go through all of your code, this is the only thing I've found that works for me without messing up all of my other CSS:

@media print {
  body {
    overflow: visible !important;
  }
}

Solution 4 - Firefox

I tried a dozen fixes for this and, in the end, all I needed was:

@media print {
  body {
    display: block;
  }
}

Solution 5 - Firefox

The long-standing bug with printing absolutely-positioned elements was fixed in Firefox 3.

The issues with missing pages are tracked in bug 521204 (look through the "depends on" list). Do you have frames or long tables on the page you're trying to print?

And yes, printing in Firefox is under-owned, sorry you have to deal with it...

Solution 6 - Firefox

I had the same issue because the height of body is set to 100%, after I modified to height: auto in my print.css, it worked.

@media print {
  body {
    height: auto;
  }
}

Solution 7 - Firefox

After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:

> If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.

As I have a big floated container I thought I'd give it a try. So, I made a mix from other answers and this article and came up with this:

body { 
	overflow: visible !important; 
	overflow-x: visible !important; 
	overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
	height: 100%; 
	display: block;
	flex: none;
	float: none;
}
.l-content,
.l-sidebar {
	float: none;
}

So basically:

Setting body to overflow: visible
Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
Eliminate float on long containers

That mix worked for me! I'm so happy I thought I'd share :)

Solution 8 - Firefox

for me (bootstrap 4) solution was

@media print {
    .row {
      display: block;
    }
}

Solution 9 - Firefox

If you are unable to overcome Firefox's limitations on printing, you could convert the page to a PDF. If you're up for that option, Prince XML is a library I'd highly recommend. It has very good CSS support including print media.

Solution 10 - Firefox

I tried adding @media print as suggested in this answer as a style definition to the page's <body> element, but Firefox (60.0 (64-bit), Windows 7 64/Pro) still truncated printout of the website to the first page only.

Then I happened to notice a checkbox entitled Simplify Page at the top of Firefox's Print Preview screen:

When I checked this box, Firefox removed some of the styling, but the Print Preview screen refreshed to include all of the pages in the website!

I'm not sure how broadly applicable this is so YMMV, but it's worth a try! So far I haven't found a comparable solution for Chrome (Version 65.0.3325.162 (Official Build) (64-bit)).

P.S.: on further experience I see that Simplify Page removes not only styling but also some entire elements such as sample code sections, so be sure to review the results carefully before printing.

Solution 11 - Firefox

the following works for me.

@media print {
  .field--body table tr {
    display: table-row-group !important;
  }
}

Solution 12 - Firefox

Firefox certainly does NOT suck in any respect. However, sometimes it adheres more strictly to standards than other browsers do. Anyways, to cut to the chase, I had the same problem, i.e. firefox was printing (also previewing) only the first 2 pages of a multipage report, built with a long table, produced by a webpage of mine. After some debugging I found out that I had included most of the report's content inside a span element with a style of {display: inline-block;} among other things. As soon as I removed that the pagination was perfect...

Solution 13 - Firefox

I had the same issue and I replaced position from position:relative to position: absolute with height: 100% from the top div to the bottom.

Solution 14 - Firefox

What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029

Like this

<html>
  <head>
	<style>
@page {
    size: A4 portrait;
	margin: 0;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Verdana", sans-serif;
}
.page {
    position: relative;
	width: 209mm;
    height: 295mm; /* slightly smaller than A4 as there's a bug in Chrome whereby it overflows
                      the physical page otherwise  */
	overflow: hidden;
}
.pagea { background-color: tomato; }
.pageb { background-color: green; }
.content {
  position: absolute;
  top: 100px;
  left: 100px;
  font-size: 36pt;
  color: black;
}
@media print {
	.page {
		page-break-before: always;
        /* uncomment these lines and it works... 
        margin-top: 1px;
        top: -1px;
        */
          /* nudge back up to compensate for margin */
    }
	.page:first-child {
		page-break-before: avoid;
	}
}
	</style>
  </head>
  <body>
	<div class="page pagea">
  		<div class="content">Page 1</div>
	</div>
	<div class="page pageb">
  		<div class="content">Page 2</div>
	</div>
  </body>
</html>

Solution 15 - Firefox

I was having a similar issue using Firefox V77. It will only print the first part of the visible page and will cut off the rest in both preview mode and print mode.

One fix I found is to change flex to block in your print stylesheet.

Also, the V78.0.2 that just relesed in July 2020 seems to have fixed the issue.

Solution 16 - Firefox

Browsers seem to add a scrollbar if the outermost root parent element, as exists in ReactJS, is height:min-content or otherwise longer than height:100vh. Then, it will surely (if not be the only way to) print from the browser's dialog. For me, making the root scroll children with overflow wouldn't let me print the position:absolute scrollable child unless printing with a custom button instead of the browser's print dialog.

Content Type	Original Author	Original Content on Stackoverflow
Question	ScottE	View Question on Stackoverflow
Solution 1 - Firefox	sinini	View Answer on Stackoverflow
Solution 2 - Firefox	yakka	View Answer on Stackoverflow
Solution 3 - Firefox	bananabanana	View Answer on Stackoverflow
Solution 4 - Firefox	NilsyNils	View Answer on Stackoverflow
Solution 5 - Firefox	Nickolay	View Answer on Stackoverflow
Solution 6 - Firefox	katwhocodes	View Answer on Stackoverflow
Solution 7 - Firefox	ithil	View Answer on Stackoverflow
Solution 8 - Firefox	srghma	View Answer on Stackoverflow
Solution 9 - Firefox	Jacob	View Answer on Stackoverflow
Solution 10 - Firefox	CODE-REaD	View Answer on Stackoverflow
Solution 11 - Firefox	hhvardan	View Answer on Stackoverflow
Solution 12 - Firefox	Mario	View Answer on Stackoverflow
Solution 13 - Firefox	Vichu	View Answer on Stackoverflow
Solution 14 - Firefox	Yair Zamir	View Answer on Stackoverflow
Solution 15 - Firefox	KuN	View Answer on Stackoverflow
Solution 16 - Firefox	Nick Carducci	View Answer on Stackoverflow