print: Ensure print containers have the right size and don't create overflow.

First, there's just no need to do something like this, this is simpler and
closer to what the screen renderer does.

Second, this causes overflow, which Firefox tries to compensate for when
fitting to page width, and fails at it. That is tracked in:

https://bugzilla.mozilla.org/show_bug.cgi?id=1698136

But this bug works around it by not causing overflow.

For modern browsers, we could avoid the duplication setting the style attribute
by using something like width: min/max-content, but this is not a big deal I
think, let me know if you'd prefer that.

Also I had to add a max-height for Chromium not to create extra pages. This
is harmless in Firefox and workarounds the Chromium bug, so so be it.
This commit is contained in:
Emilio Cobos Álvarez 2021-03-14 13:12:50 +01:00
parent 7fef896a9f
commit baed09f1ff
No known key found for this signature in database
GPG Key ID: E1152D0994E4BF8A
3 changed files with 7 additions and 6 deletions

View File

@ -39,6 +39,8 @@ function composePage(
const canvasWrapper = document.createElement("div"); const canvasWrapper = document.createElement("div");
canvasWrapper.appendChild(canvas); canvasWrapper.appendChild(canvas);
canvasWrapper.style.width = canvas.style.width;
canvasWrapper.style.height = canvas.style.height;
printContainer.appendChild(canvasWrapper); printContainer.appendChild(canvasWrapper);
// A callback for a given page may be executed multiple times for different // A callback for a given page may be executed multiple times for different

View File

@ -206,6 +206,8 @@ PDFPrintService.prototype = {
const wrapper = document.createElement("div"); const wrapper = document.createElement("div");
wrapper.appendChild(img); wrapper.appendChild(img);
wrapper.style.width = img.style.width;
wrapper.style.height = img.style.height;
this.printContainer.appendChild(wrapper); this.printContainer.appendChild(wrapper);
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {

View File

@ -1758,12 +1758,9 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
} }
/* wrapper around (scaled) print canvas elements */ /* wrapper around (scaled) print canvas elements */
#printContainer > div { #printContainer > div {
position: relative; /* Without the following max-height declaration, Chromium might create extra
top: 0; * blank pages, even though it shouldn't! */
left: 0; max-height: 100%;
width: 1px;
height: 1px;
overflow: visible;
page-break-after: always; page-break-after: always;
page-break-inside: avoid; page-break-inside: avoid;
} }