1453903 - The text inside the box is not correctly rendered in print/print preview

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, defect, P5)

Description

[roxleitan]

Attachment: print preview.png

Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID:20180412232808


[Affected versions]:
Nightly 61.0a1, Release 59.0.2

[Affected Platforms]:
Ubuntu 16.04 x64

[Steps to reproduce]:
1.Launch Firefox with a new profile
2.Open https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
3.Click "Print" from hamburger menu

[Expected result]:
The text should be inside the box

[Actual result]:
A row is displayed outside the box(please see the attached screenshot)

Comment 1

[Mats Palmgren (inactive)]

The problem is that the element has a hard-coded height:

#example-element {
	color: #333;
	margin: 20px auto;
	padding: 0;
	border: 2px solid #333;
	width: 80%;
	height: 100px;
	text-align: center;
}

Comment 2

[roxleitan]

The issue is reproducible only on Ubuntu and Mac OS X, but not on Windows 10.
I managed to reproduce it on Nightly 58.0a1 also.

Comment 3

[Schalk Neethling [:espressive]]

I do not thing there is a good reason to include the interactive example in print so, this entire component should be hidden inside the print stylesheet.

Comment 4

[Mats Palmgren (inactive)]

The example isn't "interactive" in the sense that it requires the reader
to interact with it to view the results, so it should work perfectly fine
when printed IMO.  The bug here is that an explicit 'height' was specified,
it should simply be removed.  Specifying a hard-coded height (block-axis
size really) is almost always a bad idea, we shouldn't do that.

Comment 5

[Mats Palmgren (inactive)]

https://github.com/mdn/interactive-examples/pull/724

Comment 6

[Schalk Neethling [:espressive]]

Thanks Mats, I made some comments in the PR on Github.