Open Bug 1520749 Opened 6 years ago Updated 2 years ago

Fails to print all slides from Remark.js slideshow

Categories

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

Unspecified
Linux
defect

Tracking

()

Tracking Status
firefox66 --- affected

People

(Reporter: marco, Unassigned, NeedInfo)

References

(Blocks 2 open bugs, )

Details

(Keywords: testcase-wanted, Whiteboard: [layout:print-triage:p1][frag2020])

If you load https://intro-2019-01.container.training and try to print the page, both the preview and the resulting print only have contents in the first page, all other pages are white.

Interesting! I can reproduce, in quite old builds (at least as far back as 2013-07-11, for which I had to use a saved copy of the page, because that old build won't load the "live" page due to HTTPS/SSL encryption algorithm disagreements). So, not a recent regression at least.

I also noticed that I can work around the issue by adding "padding-top:1px" to the .remark-slide-scaler{} class. (Or "margin-top:1px", or "border-top: 1px solid black".) So I'm guessing maybe the bug is that we're fooling ourselves about whether something fits on an earlier page, and this extra 1px of space pushes us over the limit & removes that confusion. Or something.

I can't investigate too much right now, but the best way to make progress here would probably be to come up with a reduced testcase.

Keywords: testcase-wanted
Priority: -- → P3

I am also seeing this same behavior in 64.0.2 (64-bit). It prints off the first page, then a blank page. The page that is being printed is anywhere between 10-12 pages depending on a user's responses. Unfortunately, the page is a secured/proprietary page so I can't show a link to it. However, I can say that it utilizes bootstrap and font awesome and I've seen things like "display: inline:block" are part of the issue, but I can't see removing all of those references from bootstrap? Chrome, IE/Edge, Opera on PC and Chrome and Safari on Mac are able to handle printing just fine.

seeing it also on nightly 68.0a1 (AUR version), and 66.0.1 (repository version) Arch Linux 64 bit, and 66.0.2 on Windows 10 64 bit

gibiru.com search results
private network pages (not reachable from the outside world)
help pages like http://www.inneractivecards.com/understanding-parts-with-inner-active-cards.html

all other browsers I have access to have printed these pages fully well.

I can print eBay searches, google searches, Amazon searches, etc. from Firefox.

The problem persists, or not, regardless of printer or page settings

Whiteboard: [layout:print-triage:p1]
Summary: Only the first page is printed, all others have no content → Fails to print all slides from Remark.js slideshow
Blocks: 1601429

http://www.inneractivecards.com/understanding-parts-with-inner-active-cards.html is broken in Chrome too.
The problem seems to be this rule which doesn't work in print mode (since it will only ever produce 1 page).

.wsb-canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-x: auto;
	overflow-y: scroll;
	background-color: #f7f7f7;
	background-repeat: repeat;
}

It's simply a broken style sheet and is unrelated to the original reported problem.

The slide show at https://intro-2019-01.container.training is driven by JS. All slides have this rule:

.remark-slide-container {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	page-break-after: always;
}

and to show a particular slide, a class remark-visible is added to that element:

.remark-visible {
	display: block;
	z-index: 2;
}

They also have a print style sheet:

@media print{
.remark-container {
    overflow: visible;
    background-color: #fff
}

.remark-container.remark-presenter-mode .remark-slides-area {
    top: 0;
    left: 0;
    height: 100%;
    width: 681px
}

.remark-container.remark-presenter-mode .remark-preview-area,
.remark-container.remark-presenter-mode .remark-notes-area {
    display: none
}

.remark-container.remark-presenter-mode .remark-slide-notes {
    display: block;
    margin-left: 30px;
    width: 621px
}

.remark-slide-container {
    display: block;
    position: relative
}

.remark-slide-scaler {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -webkit-transform-origin: initial;
    box-shadow: none
}
}

It seems like this should work since the print sheet has display: block on .remark-slide-container.
It's not clear to me why the @media print part of the sheet appears to have no effect.

I just checked and the rule applies just fine here. (It also makes sense as we wouldn't create so many pages otherwise.)

Furthermore, all slides print if I remove the display: table from the slides (in the .remark-slide rule), and the transform and position properties from .remark-slide-scaler.

So this doesn't look to me like a style system bug.

Any chance of a testcase based on those observations? ;-)

Not really, but I guess I could try to give that a shot tomorrow.

Flags: needinfo?(emilio)
Whiteboard: [layout:print-triage:p1] → [frag2020]
Whiteboard: [frag2020] → [layout:print-triage:p1][frag2020]

Included in Jira S&Q22 Epic https://mozilla-hub.atlassian.net/browse/FFXP-1762 for traceability.

Severity: normal → S3

Given that this is an issue with table fragmentation and missing content (per comment 7), this might be related to bug 1648947.

You need to log in before you can comment on or make changes to this bug.