Firefox printing only 1st page

Question

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!

Jhvh

Absolute positioning sometimes breaks pagination. – Intervocalic

@Intervocalic - absolute positioning of any elements (even hidden ones), or just the content to be printed? – Jhvh

the content to be printed. position: absolute takes elements out of the layout flow, I think that is why the OP of your linked question has problems. A live demo would help – Intervocalic

Nope, nothing is positioned. tried position:static on everything printable as well. Unfortunately I can't give you a preview as it's locked down to specific IPs prior to launch. – Jhvh

Answer 1

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...

Conformity

Nope, no frames or long tables. Just plain old content! – Jhvh

@ScottE: Sorry, don't know then. If I had to figure it out, I'd reduce the page to the smallest possible testcase to figure out what causes the problem <developer.mozilla.org/en/Reducing_testcases> – Conformity

Answer 2

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.

Jennifferjennilee

Thanks for the tip. Similar to you, I had a DIV set to display: table. I created a print stylesheet which set it to display: block and the problem resolved! – Margertmargery

Answer 3

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.

Queenhood

Flex is still an issue in FF 44.0.2. Also noticed that my page-break-inside and page-break-after avoids which were ignored by FF suddenly worked correctly once I swapped out flex for block. – Coppins

Ionic <ion-split-pane> was my flex culprit in addition to forum.ionicframework.com/t/… and needs !important – Merrymaking

display: flex is still an issue, 4 years later. FF 60.9.0esr – Warfourd

Now 6 years later and still an issue is the latest firefox version. Set my body element now to display: block in print css and it's working fine. – Capias

Answer 4

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;
  }
}

Worrywart

Where do you put this code? – Combustor

Answer 5

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

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

Wrigley

I also had to add position relative to the body in order to get this to work! – Bivens

Answer 6

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;
  }
}

Emptyhanded

Answer 7

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:

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

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

Stilly

Answer 8

for me (bootstrap 4) solution was

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

Mckellar

thats propably not the ideal solution but you can add class="row d-print-block" to the rows that causes the Problem - so you dont override all .row – Washhouse

modified the answer @Washhouse – Mckellar

Answer 9

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.

Cranston

Interesting option. Did I mention this is a sharepoint site? I can only imagine what would happen to the garbage markup it emits. – Jhvh

Ugh... I wouldn't recommend this for a Sharepoint site, haha. – Cranston

Answer 10

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.

Beekman

Answer 11

the following works for me.

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

Celebrate

Answer 12

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...

Potpie

Does it not? I urge you to open Firefox's settings interface. ;} Just teasing. Another fix for people with long reports: you may have put it all in a div that floats left with, say, a width of 1000px. It could be due to the container of the table. Check that first. – Reamer

"However, sometimes it adheres more strictly to standards than other browsers do." - sometimes, that's what "sucks", unfortunately. – Prowler

Answer 13

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.

Gabionade

Answer 14

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>

Condone

Answer 15

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.

Hora

Answer 16

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.

Poleyn