1897723 - www.slowboring.com - Print previews display copyright footer over bottom text on first page

Status: NEW

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

Description

[Andreea Zlata]

Environment:
Operating system: Windows 10
Firefox version: Firefox 126.0/128.0a1 (2024-05-19)

Steps to reproduce:

1. Access https://www.slowboring.com/p/the-geopolitical-underpinnings-of either logged in or in a new session. Scroll down a bit and close the "sign in" / "continue reading" dialog if it is present.
2. Print (Ctrl+P)
3. Observe the first page.

Expected Behavior:
No footer should be displayed on top of the content.

Actual Behavior:
Print previews display copyright footer over bottom text on first page

Notes:

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

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

Comment 1

[Andreea Zlata]

Attachment: 20.05.2024_11.03.59_REC.mp4

Comment 2

[13hu]

note that this issue impacts printing on most Substack blogs or sites that use Substack articles, not just the website in the subject line.

Comment 3

[Daniel Holbert [:dholbert]]

The copyright footer here is absolutely positioned:

.footer-wrap .footer {
  position: absolute;
  bottom: 0;

So this may be a version of bug 267029 or similar. I want to come up with a reduced testcase to be sure, though. My initial attempt was this, but the footer ends up on the last-page as-expected:
[EDIT: removing data URI since it had a typo and didn't repro the bug anyway]

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (reduced)

Yeah, I think this is a version of bug 267029. Here's a reduced testcase based on the linked article.

If I print-preview this testcase in Firefox (portrait us-letter paper size), I see the Abspos Div at the bottom of page 1, when really it should be on page 2 (at the very end of the bordered area).

Comment 5

[Raul Bucata]

The issue is still reproducible

Tested with:

Browser / Version: Firefox Nightly 138.0a1 (2025-03-23) (64-bit)
Operating System: Windows 10 PRO x64

Comment 6

[Daniel Holbert [:dholbert]]

Thanks! I spun off a new platform-bug with a testcase based on the one attached here.

Comment 7

[Daniel Holbert [:dholbert]]

(In reply to 13hu from comment #2)

note that this issue impacts printing on most Substack blogs or sites that use Substack articles, not just the website in the subject line.

Adding needs-contact to see if we can reach out to Substack to see if they can fix this.

One workaround that they could deploy would be the following to cancel out their rule quoted in comment 3 when printed:

@media print {
  .footer-wrap .footer {
    position: static;
  }
}

We could deploy that^ as a sitepatch, too -- I confirmed that it fixes the issue here and successfully puts the copyright notice at the bottom of the printed output. However, sitepatches here are a little tricky since (as in this slowboring.com example) the affected pages aren't all part of the same domain that we can target.

(With that fixed, there's another unrelated issue, too - a little bit of content seems to get clipped/pushed-off-the-page on the right side of the article -- but I can reproduce that right-side-clipping issue in Safari/WebKit as well, for what it's worth.)

Comment 8

[13hu]

reporter here - thanks for looking into this.
If you're doing a sitepatch, would probably be good to do it for *.substack.com

Is this also a W3C webcompat issue with how firefox handles printing of absolute position though, since Chromium/Safari does not have this issue?

Best,

Comment 9

[13hu]

ah I see that's bug 1956112