issue: Fractured Print Images

RabidCicada commented 1 year ago

Version Number

2.1.0

Steps to reproduce

In Chrome or Edge, click print and configure to print 2 cards in portrait, scaled down to fit on page
After seeing valid images, Click print
Observe in the print preview that part of the lower edge of the bottom card is clipped off and put onto the next page "for no reason"

Expected behaviour

It prints correctly and exactly as seen in the datacards preview window

What browsers are you seeing the problem on?

Chrome, Edge

Relevant log output

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct

RabidCicada commented 1 year ago

I realize there's another factor at play here possibly: printer driver/software. Please lemme know what you think!

ronplanken commented 1 year ago

I will be taking a look, printing an making sure something fits is hard with websites. I have some new tech where I turn the entire card into a PNG that might help with fixing issues like this. Thanks for the report.

ScornMandark commented 1 year ago

Adding on here - In chrome, I set the page to A5 Landscape, scaled it down to fit, margins to none, and it cut off the bottom in the print preview (without putting it on the next page). When I scaled it down from 100% to 99%, it popped back on.

With the margins to minimum, it kept the bottom half that it cut off (but if the invulnerable window was bridging the gap, the value disappears).

ScornMandark commented 1 year ago

I will be taking a look, printing an making sure something fits is hard with websites. I have some new tech where I turn the entire card into a PNG that might help with fixing issues like this. Thanks for the report.

That would be excellent - I'd prefer a .png export anyways.

RabidCicada commented 1 year ago

Some discussion with @ronplanken .

There is trickiness in sizing things. He uses CSS scaling to get things to LOOK right. But that doesn't affect the actual div size so then he also changes the size of the div explicitly. This is to let flexbox/grid do it's thing nicely across pages.

I have further found that the overflow: hidden; in .print-page of App.css seems to be related along with this current fix of break-inside: avoid-page or page-break-inside: avoid.

With Recent page-break-inside fix Here is it breaking with System print dialogue at 100%:

Here it is breaking with System print dialogue at 95%:

Here it is working once I pass the magic threshold of 93%:

Without recent page-break-inside fix Now for some further insight. If I remove the recent addition of page-break-inside: avoid; here's the same gradation:

Here is it breaking with System print dialogue at 100%:

Here is it breaking with System print dialogue at 95%:

Here it is working once I pass the magic threshold of 93%:

Intuition on the problem It is related to the CSS math and things that are being done and it is arbitrarily clipping stuff that is "beyond the data card" and specifically seems to remove the entire footer of the card in one go Partial fix to prevent the problem...remove the Overflow: hidden from the .print-page section of App.css.

I did this below which made it work except that it was stuck at a maximum system dialogue size of 88%. Setting it higher did nothing.

Side Effects of removing overflow Here is it working, with the size limit bug, with a progression to show behavior:

Here is it "working" with System print dialogue at 80%:

Here is it "working" with System print dialogue at 88%:

Here is it "working" with System print dialogue at 100%:

ronplanken / game-datacards