1907822 - toebes.com - Print preview issues

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Raul Bucata]

Environment:
Operating system: Windows 10
Firefox version: Firefox 128.0

Steps to reproduce:

1. Navigate to : https://toebes.com/codebusters/Samples/firefox_toebes_printing_example.html
2. Print the page in print preview using the browser feature
3. Observe

Expected Behavior:
Printing is rendered as expected

Actual Behavior:
Printing doesn't format correctly

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, and Firefox Release
• Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/139133

Comment 1

[Daniel Holbert [:dholbert]]

Specific issues called out in the github issue by the original reporter:

1. Firefox generates 5 pages instead of the 3 that it should.
2. The names of participants table ends up wider than the page.
3. The Score table on the first page is off the right hand edge of the page.
4. The header for the second page (Page 1) is on a page by itself
5. The footer for the second page (Page 1) is near the top of the third page
6. The text for the timed question appears too high on the page
7. The text for the timed question is in a slightly larger font such that it wraps early.
8. Similar problems are on the last page, with the header appearing nominally in the correct place
9. The footer for the last page is on a page by itself.

This doesn't exactly match what I'm seeing, though. (I'm not sure if differences in experience are due to the content changing since this was filed, or browser implementations changing since this was filed, or environment differences -- e.g. RE item #7 about particular font choice is likely environment-specific.)

The main Firefox-vs-Chrome difference that I'm seeing is that we generate an extra pagebreak, with page 2 ending up mostly-blank -- we show 2024 Science Olympiad National Codebusters Division B Team Number:_B_________ at the top of that page and that's all, whereas Chrome goes on to show more content below that on the same page.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (just taken from the site)

Here's a copy of the testcase from the live site ( https://toebes.com/codebusters/Samples/firefox_toebes_printing_example.html ), for archival/reference.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: print-to-PDF results from Firefox Nightly 132.0a1 (2024-09-05) (64-bit)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: print-to-PDF results from Chrome 130.0.6669.2 (Official Build) dev (64-bit)

Comment 5

[Daniel Holbert [:dholbert]]

Comparing the two PDFs, I'm not noticing anything obviously different aside from subtle font differences (which are expected) and the pagebreak difference on page 2 that I mention at the end of comment 1.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: print-to-PDF results from WebKit (gnome-web aka epiphany v46.0)

Comment 7

[Daniel Holbert [:dholbert]]

As shown in comment 6, WebKit matches Firefox in inserting a pagebreak after just a little content on page 2. I've filed bug 1917145 on that behavior with a reduced testcase. WebKit has one other quirk -- it generates an extra page at the end for the final "Page 2" footer-text, which was what the reporter had mentioned as issue #9 in Firefox, but I didn't actually hit myself in Firefox. That's interesting, but I'm not going to worry about that too much since we're matching the reporter's expectation.

Notably, it looks like the site in question (toebes.com) is presumably operated by the reporter on the github issue (https://github.com/toebes ), so we can probably just directly contact them about bug 1917145 on the webcompat issue and suggest a workaround there, which in this case is probably removing pagebreak from <div class="question pagebreak">.

Comment 8

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #7)

Notably, it looks like the site in question (toebes.com) is presumably operated by the reporter on the github issue (https://github.com/toebes ), so we can probably just directly contact them about bug 1917145 on the webcompat issue and suggest a workaround there, which in this case is probably removing pagebreak from <div class="question pagebreak">.

(update: success, we're in touch with the reporter/site-author on github. I suggested several ideas for workarounds there.)