1520749 - Fails to print all slides from Remark.js slideshow

Status: RESOLVED DUPLICATE of bug 1848407

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

Description

[Marco Castelluccio [:marco]]

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.

Comment 1

[Daniel Holbert [:dholbert]]

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.

Comment 2

[Sean]

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.

Comment 3

[Will Blaylock]

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

Comment 5

[Mats Palmgren (inactive)]

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.

Comment 6

[Mats Palmgren (inactive)]

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.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

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.

Comment 8

[Mats Palmgren (inactive)]

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

Comment 9

[Emilio Cobos Álvarez (:emilio)]

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

Comment 10

[Frank Griffith Jr]

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

Comment 11

[Daniel Holbert [:dholbert]]

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

Comment 12

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

https://intro-2019-01.container.training looks good to me in print preview in current Nightly, and mozregression finds out this is fixed by bug 1848407.