Open Bug 1189855 Opened 9 years ago Updated 2 years ago

Print Preview - some HTML element/CSS styling combinations do not display correctly

Categories

(Core :: Print Preview, defect)

Product:
Core
Component:
Print Preview
Version:
42 Branch
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: dw-dev, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
Build ID: 20150730030208

Steps to reproduce:

I am the author of the "Print Edit" add-on, which integrates closely with Firefox's print preview feature.

During the past 5 years of developing and supporting Print Edit, I have come across several HTML element/CSS styling combinations that do not display correctly in print preview.

I have included crude workarounds for these problems in Print Edit, but that is not the right long term solution. The print preview functionality in Firefox really needs fixing.

I thought it would be useful if I summarized the problematic combinations:

1. A long <table>/<div>/<iframe> inside a <div>/<body> that is styled with absolute positioning, flex/inline display, left/right float or hidden overflow. 

2. A long <table>/<div>/<iframe> inside a <fieldset>.




Actual results:

Sometimes only the first page is displayed in print preview (and only the first page prints).  Sometimes that is a lot of blank white space before or after a page break.


Expected results:

All pages should be displayed in print preview, without large amounts of white space before or after page breaks, and all pages should print.
Summary: Print Preview - some HTML does not display correctly → Print Preview - some HTML element/CSS styling combinations do not display correctly
Component: Untriaged → Print Preview
Product: Firefox → Core
Please attach minimal testcase or public url.
Flags: needinfo?(dw-dev)
Okay, here are some pages that do not print preview correctly ...

Only one page displayed:

    1. http://design.tutsplus.com/tutorials/quick-tip-the-magic-of-photoshops-blend-if--cms-23862

First page blank, only three pages displayed:

    2. https://help.ubuntu.com/12.04/serverguide/openvpn.html

    3. https://support2.microsoft.com/search/default.aspx?query=vista&x=0&y=0&mode=a&spid=global&ast=25&ast=28&ast=29&ast=30&ast=31&ast=33&catalog=LCID%3D1033

    4. http://www.siriusxm.com/channellineup

First two pages blank, only three pages displayed:

    5. http://eatingacademy.com/nutrition/what-i-actually-eat

On second page, left margin offset missing [different to problems 1-5]:

    6. https://support.microsoft.com/en-gb/search?query=windows%207

On first page, contents overflow paper sheet right margin [different to problems 1-5]:

    7. http://www.amazon.com/gp/product/B007D930YO/ref=oh_aui_detailpage_o01_s00?ie=UTF8&psc=1
Flags: needinfo?(dw-dev)
Many bugs about print preview/output failures due to CSS elements have been reported in the past.
Honestly, it's better to file one bug per print issue, and attach a reduced testcase for each case to know if it's already reported or not.
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago
Resolution: --- → INVALID
I'm sorry to say that I don't agree with your logic for marking this bug invalid. Generally, I would agree with you that a specific bug report makes it much easier to identify the cause of a problem.

However, as I am sure you know, there are quite a number of similar print/print preview bugs that have been reported, but have not been fixed, even after several years. I assume this is because fixing any one of these bugs would not be a big enough win to justify the effort required.

The purpose of my bug report is to identify a lot of similar cases (set out in points 1 & 2 in my original bug report), which I suspect all have a common root cause, in the hope that fixing all of these cases would be a big enough win to justify the effort required.

I could not see any other way of making this point.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
The main issue is you need to find reduced testcase for each bad print output, by saving the webpage and removing all CSS stuff until the print problem is not reproducible.
(In reply to dw-dev from comment #2)
Do all these problems also occur in FF39?
If not, then it would be useful to have regression ranges.
(some might be the recent FF42 regression (bug 1189837 etc))
(In reply to dw-dev from comment #4)
> I could not see any other way of making this point.

It would be helpful to have minimal testcases for each of the URLs.
It's hard to speculate about similarities before we have that.
All of these problems also occur with FF39.

Give me a couple of days and for each of the URLs I will identify:

- the HTML element and/or CSS styling that is causing the problem
- the relevant source line numbers

Depending on that information, we can see the best way to proceed with preparing minimal tet cases.
I've done some investigation of the URL's listed in Comment 2.

I have focused on URL's 1-5, since I think it is less certain that URL's 6-7 have the samne underlying cause.

Basically, the investigations of URL's 1 - 5 shows that print preview has problems if there is a large <div> element that spans more than one page and has a "display" property that is not "block".

Note, in the case of URL 5, <div>'s with "float: left" style also contribute to the problem.


1. http://design.tutsplus.com/tutorials/quick-tip-the-magic-of-photoshops-blend-if--cms-23862

   View Page Source, Line 4:  <body class="page-body topic-design" ... >

       <body> styled with:  .page-body { display: flex; }

       Change <body> style to:  display: block !important;

   View Page Source, Line 4:  <div class="global-nav__header-content">

       <div> styled with:  .global-nav__header-content { display: flex; }

       Change <div> style to:  display: block !important;

   Result:  Print preview works fine, with all pages displayed and no blank pages.


2. https://help.ubuntu.com/12.04/serverguide/openvpn.html

   View Page Source, Line 46:  <div id="cwt-content" class="clearfix content-area">

       <div> styled with:  .clearfix { display: inline-block; }

       Change <div> style to:  display: block !important;

   Result:  Print preview works fine, with all pages displayed and no blank pages.


3. https://support2.microsoft.com/search/default.aspx?query=vista&x=0&y=0&mode=a&spid=global&ast=25&ast=28&ast=29&ast=30&ast=31&ast=33&catalog=LCID%3D1033


   View Page Source, Line 580:  <div id="contentArea">

       <div> styled with:  #contentArea { display: table; }

       Change <div> style to:  display: block !important;

   Result:  Print preview works fine, with all pages displayed and no blank pages.


4. http://www.siriusxm.com/channellineup

   View Page Source, Line 998:  <div id="schedule-content">

       <div> styled with:  #schedule-content ( display: inline-table; }

       Change <div> style to:  display: block !important;

   Result:  Print preview works fine, with all pages displayed and no blank pages.


5. http://eatingacademy.com/nutrition/what-i-actually-eat

   View Page Source, Line 222:  <div id="wrapper">

       <div> styled with:  #wrapper { display: table; }

       Change <div> style to:  display: block !important;

   View Page Source, Line 306:  <div id="content" class="content_blog">

       <div> styled with:  #content { float: left; }

       There are many other <div>'s with "float: left;" style

       Change all <div>'s with "float: left;" style to:  float: none !important;

   Result:  Print preview works fine, with all pages displayed and no blank pages.
(In reply to dw-dev from comment #9)
> I've done some investigation of the URL's listed in Comment 2.

Thanks!

> 1.
> http://design.tutsplus.com/tutorials/quick-tip-the-magic-of-photoshops-blend-
> if--cms-23862

I think our fragmentation support for flexbox layout is incomplete.
Bug 939897 covers some missing pieces.  dholbert knows more.

> 2. https://help.ubuntu.com/12.04/serverguide/openvpn.html

I'm pretty sure this is bug 534182.  We don't support fragmenting
inline-block boxes at all, AFAICT.

> 3.
> https://support2.microsoft.com/search/default.
> aspx?query=vista&x=0&y=0&mode=a&spid=global&ast=25&ast=28&ast=29&ast=30&ast=3
> 1&ast=33&catalog=LCID%3D1033

Some items are missing in Print Preview.  We need a simplified testcase
to tell what the problem is here.  We do support fragmenting display:table.

> 4. http://www.siriusxm.com/channellineup

We don't support fragmenting inline-table, bug 869440.

> 5. http://eatingacademy.com/nutrition/what-i-actually-eat

We do support fragmenting floats and table so it's not clear what the problem
is here.  We need a simplified testcase here too.


Any help making testcases for 3 and 5 would be great!
https://wiki.mozilla.org/QA/Triage#How_to_Really.2C_Really_Help_Developers_on_Bugs_--_Minimal_Testcases
Thanks for this analysis and the referenced bugs.  It is a concern that there is no support for inline-block and inline-table, and only limited support for flex.  Especially, since the 7 URL's that I referenced in Comment 2 all print preview correctly in Google Chrome and Internet Explorer.

I have had a very brief look at the list of bugs reports (348) related to the search term "print preview".  It would be interesting to know which of these are related to fragmenting/pagination.  Is there a list of these?

Since the chances of fixing all of the fragmenting/pagination bugs in a reasonable timescale seem small, has any consideration been given to having a "Fix Page Breaks" button on the print preview toolbar?  It might not be elegant, and the results might not be perfect, but it would be a lot better than doing nothing!

The "Fix Page Breaks" feature is my Print Edit add-on does a pretty good job of "fixing" (working around) these fragmenting/pagination problems.  It works in all of the cases described in my original bug report, which include the problems in the 7 URL's referenced in Comment 2.

I will have a go at preparing a test case for the problem in URL 3, since I think this is quite a common and important case.  I don't know how easy that will be, so cannot commit to a timescale.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.