search

cognitom / paper-css

Paper CSS for happy printing
https://www.npmjs.com/package/paper-css
MIT License
2.5k stars 344 forks source link

Firefox adds a blank page on printing - even with single empty page #32

Open janvydra opened 5 years ago

janvydra commented 5 years ago

print2.txt

Hi, Firefox, Edge and Explorer add a blank page on print preview and printing. The initial view on load looks fine, but when I hit "print" extra page is added. Am I getting something wrong? Is there a way to deal with this?

cognitom commented 5 years ago

Hi, @janvydra Pls, forget everything about IE... By the way, Firefox and Edge seems OK in my environment.

Check this example: https://github.com/cognitom/paper-css/blob/master/examples/a4.html

You can check the same file from this URL directly: https://raw.githack.com/cognitom/paper-css/master/examples/a4.html

Open the URL above on Firefox and Edge. You may also need to check the orientation of papers and stuff.

jlannoy commented 5 years ago

I have the exact same problem with Safari (last version). Even with your direct example.

screwt commented 5 years ago

Same problem only on widnows+firefox using 'Adobe PDF' or 'PDF Pro Virtual Printer' as output. Run well on linux... Chome is ok on all platforms.

NerdyBoyCool commented 5 years ago

I have same problem on safari (platform is Mac OS). I fixed it like this. I think this solution is temporary fix.

.paper__sheet
  @extend .sheet
  @media print
    width: 100% !important
    height: 100% !important

I think we don't need width, height in printing mode.

スクリーンショット 2019-08-30 12 16 43
FlyveHest commented 5 years ago

I am experiencing the same thing, a blank page is added after every page in FireFox, but only when printing, not when viewing in browser. (on Windows platform)

It seems to work in Chrome.

bompus commented 5 years ago

Chrome seemed to be fine, but was having issues in Safari. This is how I fixed it. It didn't seem to cause any regression in Chrome.

@media print {
   .sheet {
      /* firefox, safari extra page fix */
      width: 100% !important;
      height: 100% !important;
      page-break-after: auto !important;
   }
}
amdev commented 4 years ago

Hi just found this issue in Chrome. How to fix?

Fujihita commented 3 years ago

I have found that reducing the paper size by 0.4mm (from 296mm to 295.6mm) will fix the issue in Firefox (Linux). body.A4 .sheet { width: 210mm; height: 295.6mm }

@bompus fix also eliminates the extra pages but it also causes the content on the next sheet to flow over the unused space of the sheet before it.

warmwhisky commented 1 year ago

Try putting style="contain: size;" or style="contain: strict;" around the parent element