1529152 - repeating-linear-gradient prints at the wrong scale/position, causing a "repeated thin line" binder-paper gradient to draw as a solid-black area when printed

Status: NEW

(Core :: Printing: Output, defect, P3)

Description

[Alex Shafer]

Attachment: gradient_print_test.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

1. Create a web page containing a CSS repeating-linear-gradient background
2. Print the page with appropriate options selected to include background images (the bug happens with or without background colors included)

See attached test case.

Actual results:

The background printed as solid black.

Expected results:

The repeating linear gradient should be rendered on the printed output the same as it does on screen.

Comment 1

[Alex Shafer]

Attachment: Screenshot of firefox rendering the test case correctly on screen

Comment 2

[Alex Shafer]

Attachment: Result of printing the test case showing the bug

Comment 3

[Daniel Holbert [:dholbert]]

Thanks for the bug report. I can reproduce, though I had to tweak the testcase a bit before I got solid-color rather than nothing-at-all. (Probably depends on printer DPI or some other characteristic.)

It looks like we're getting the scaling wrong when drawing the gradient (and getting the positioning wrong, too, perhaps as a result of the same issue). I'll post a second testcase with wider stripes.

Worth noting, too:
(1) Print Preview is unaffected (on Windows/Linux, where we have built-in previewing UI. On Mac, I assume print-preview is affected, since that really does a print-to-PDF)

(2) When testing this, you need to find the "Options" area of the print dialog, and tick the checkbox for "print background images". This checkbox is un-checked by default, and you need to check it to get the gradient to even attempt to print.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2: should print 6 equal-height stripes of alternating colors

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: PDF printout of testcase 2 (showing the bug)

Comment 6

[Daniel Holbert [:dholbert]]

Hmm, one further confounding issue: different PDF viewers seem to disagree about how to render my printout of testcase 2.

• Safari and Edge both render it "correctly" (6 solid stripes, alternating lime/blue).
• Chrome's built-in PDF viewer renders it nearly-correctly, but with a thin blue stripe at the top.
• Firefox's built-in PDF viewer, PDF.js (disabled by default but toggleable in preferences) renders it as a single mostly-lime gradient, with hints of blue at the bottom.
• My native PDF viewer "Evince" renders it as 3 different-height solid stripes (lime, blue, lime).

So, there may be some PDF-viewer inconsistencies involved here as well. Having said that, all the viewers I've tested seem to agree on rendering Alex's printout as a solid black area (no stripes), so there is something that Firefox itself is definitely doing wrong there.

Comment 7

[Daniel Holbert [:dholbert]]

I filed https://github.com/mozilla/pdf.js/issues/10572 on the PDF.js misrendering of my printout, BTW.