Fix PDF printing artifacts

Fixes zotero/zotero#4685

src/common/stylesheets/base/_base.scss

@@ -171,46 +171,35 @@ input[type="range"] {
 		display: none;
 	}
 
-	.page, .page canvas {
-		position: static;
-		padding: 0;
-		margin: 0;
-	}
-
-	.page {
-		float: left;
-		display: none;
-		border: none;
-		box-shadow: none;
-		background-clip: content-box;
-		background-color: rgba(255, 255, 255, 1);
-	}
-
-	.page[data-loaded] {
-		display: block;
+	#split-view iframe {
+		visibility: hidden !important;
 	}
 
 	body[data-pdfjsprinting] #printContainer {
 		display: block;
 	}
-	#printContainer {
-		height: 100%;
-	}
+
 	/* wrapper around (scaled) print canvas elements */
 	#printContainer > div {
-		position: relative;
-		top: 0;
-		left: 0;
-		width: 1px;
-		height: 1px;
-		overflow: visible;
 		page-break-after: always;
 		page-break-inside: avoid;
+
+		/* The wrapper always cover the whole page. */
+		height: 100%;
+		width: 100%;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
 	}
+
 	#printContainer canvas,
 	#printContainer img {
 		direction: ltr;
 		display: block;
+		max-width: 100%;
+		max-height: 100%;
 	}
 }
 

src/pdf/pdf-print-service.js

@@ -80,16 +80,13 @@ class PrintTask {
 		const body = document.querySelector("body");
 		body.setAttribute("data-pdfjsprinting", true);
 
-		const hasEqualPageSizes = this.pagesOverview.every(function (size) {
-			return (
-				size.width === this.pagesOverview[0].width &&
-				size.height === this.pagesOverview[0].height
-			);
-		}, this);
+		const { width, height } = this.pagesOverview[0];
+		const hasEqualPageSizes = this.pagesOverview.every(
+			size => size.width === width && size.height === height
+		);
 		if (!hasEqualPageSizes) {
 			console.warn(
-				"Not all pages have the same size. The printed " +
-				"result may be incorrect!"
+				"Not all pages have the same size. The printed result may be incorrect!"
 			);
 		}
 
@@ -99,22 +96,12 @@ class PrintTask {
 		// TODO(robwu): Use named pages when size calculation bugs get resolved
 		// (e.g. https://crbug.com/355116) AND when support for named pages is
 		// added (http://www.w3.org/TR/css3-page/#using-named-pages).
-		// In browsers where @page + size is not supported (such as Firefox,
-		// https://bugzil.la/851441), the next stylesheet will be ignored and the
-		// user has to select the correct paper size in the UI if wanted.
+		// In browsers where @page + size is not supported, the next stylesheet
+		// will be ignored and the user has to select the correct paper size in
+		// the UI if wanted.
 		this.pageStyleSheet = document.createElement("style");
-		const pageSize = this.pagesOverview[0];
-		this.pageStyleSheet.textContent =
-			// "size:<width> <height>" is what we need. But also add "A4" because
-			// Firefox incorrectly reports support for the other value.
-			"@supports ((size:A4) and (size:1pt 1pt)) {" +
-			"@page { size: " +
-			pageSize.width +
-			"pt " +
-			pageSize.height +
-			"pt;}" +
-			"}";
-		body.appendChild(this.pageStyleSheet);
+		this.pageStyleSheet.textContent = `@page { size: ${width}pt ${height}pt;}`;
+		body.append(this.pageStyleSheet);
 	}
 
 	destroy() {