Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

When printing a web page, only content in the viewport prints

  • 12 replies
  • 1 has this problem
  • 15 views
  • Paskiausią atsakymą parašė the-edmeister

more options

I'm a web developer troubleshooting a print issue. When I print a page in Firefox, it prints only content in the viewport. When I change print scale from 100% to 30%, more text shows, but only as much as fits in the viewport. When I click "simplify page" the entire page displays correctly.

steps taken: I have a stylesheet, and media query, for print. All content is displayed as block. All overflow is visible. Height set to auto. I have reset all print settings in about:config.

This site prints correctly in Chrome, Safari, IE and Edge. Other people, in and out of the office network experience the same issue.

I'm a web developer troubleshooting a print issue. When I print a page in Firefox, it prints only content in the viewport. When I change print scale from 100% to 30%, more text shows, but only as much as fits in the viewport. When I click "simplify page" the entire page displays correctly. steps taken: I have a stylesheet, and media query, for print. All content is displayed as block. All overflow is visible. Height set to auto. I have reset all print settings in about:config. This site prints correctly in Chrome, Safari, IE and Edge. Other people, in and out of the office network experience the same issue.

Modified by MurderousMarvin

All Replies (12)

more options

Can you show a example of how it is printing? Can you tell me what you mean by viewport?

more options

I kind of explained that incorrectly, I apologize. By viewport what I really meant was initial viewport. I mean the first 900 or so pixels of the web page, after the header. Basically one "screen height" of content. I attached two screenshots. One is the page before I do a print preview. The other is the print preview. Notice how the text at the bottom of the screen from the first photo is the last text printed in the print preview. That's where it cuts off. I wrote this question on a work intranet using a mac. I made these screenshots on my home PC running windows 10. Exact same behavior.

Modified by MurderousMarvin

more options

I notice your print preview shows the content stopping at the end of page 2 instead of page 1. Does page 1 contain only a page header?

Firefox sometimes treats block of content as unbreakable when assigned certain styles. You have covered some of the most common issues (e.g. display:flex or display:table, overflow). What about position and float properties? And while it looks unlikely, beware of the fieldset tag.

If you don't find the source of the problem, do you want to share a link to the page that has this problem?

more options

Yes, page 1 is just a header and a large gap

re: layout, There's not a lot of variation on this page. It's a tall stack of p tags.

I'm hesitant to include a link. I'd have to get a go ahead.

more options

Well, you can use the Page Inspector to look at element which is paginated to the top of page 2, and consider any unusual style rules that apply to its ancestor elements which might cause Firefox to treat that ancestor as "unbreakable" (which means all content that won't fit on page 2 is lost).

By the way, I'm not condoning these printing bugs, just trying to figure out which one it is.

more options

You're complicit in these printing bugs...

No, of course. Thank you for taking the time to help, I really appreciate it.

The screen height thing seems like a solid clue to whatever's happening. Regardless of the content structure, whatever text is at the end of the first screen, is the last text printed. Even with print scale, switching to a small scale results in more text printed, but it's still cut off at the point that the screen ends.

more options

MurderousMarvin said

The screen height thing seems like a solid clue to whatever's happening. Regardless of the content structure, whatever text is at the end of the first screen, is the last text printed. Even with print scale, switching to a small scale results in more text printed, but it's still cut off at the point that the screen ends.

When you refer to print scale, I think of the Print Preview display rather than the ordinary screen (scrolling) display. The Print Preview display should, in a perfect world, reflect what will print on paper or in a PDF when you click Print. Unfortunately, Print Preview doesn't have any debugging or inspection capability. You would need to do that in the normal browsing view.

more options

Agreed, and hence the issue.

more options

I don't understand your reply. Print Preview matches the print output. That is not the issue. The issue is what style rule causes the problem.

You know how I would use the Page Inspector to understand the styling of the block that does not paginate. Hopefully you will find an explanation. Or if it goes live that way, you then can share a URL here.

more options

I only mean that the process of translating the page for print is opaque. I can make changes and see if they affect anything, but I don't really know what the print engine is thinking or doing.

To me, the page scale thing in print preview is significant because it shows that the print engine can see everything on the page, when I lower the scale more text shows, so it's not that the p tags are inline-block or that overflow is hidden or any other css issues that seem likely, it's that something is triggering the print engine to paginate incorrectly

I appreciate all your time and help.

Modified by MurderousMarvin

more options

One of the ancestor elements (containing block) of the "p" tags most likely uses a style rule that Firefox (wrongly) thinks creates an unbreakable block for printing. That's what we're looking for.

more options

MurderousMarvin said

I'm a web developer troubleshooting a print issue. When I print a page in Firefox, it prints only content in the viewport. When I change print scale from 100% to 30%, more text shows, but only as much as fits in the viewport. When I click "simplify page" the entire page displays correctly. steps taken: I have a stylesheet, and media query, for print. All content is displayed as block. All overflow is visible. Height set to auto. I have reset all print settings in about:config. This site prints correctly in Chrome, Safari, IE and Edge. Other people, in and out of the office network experience the same issue.

Perhaps your query is more suited to a developers forum, not here - the end user Firefox support forum.

Please see this - Where to go for developer support https://stackoverflow.com/questions/tagged/firefox+or+firefox-os+or+html5-apps

Or you could try posting at the Web Development / Standards Evangelism forum over at the MozillaZine fora. The contributors over there are more knowledgeable about web page development issues with Firefox. http://forums.mozillazine.org/viewforum.php?f=25 You'll need to register and login to be able to post in that forum.