[BUG] Multi-page HTML leaves some marker elements on every pages

[mulder999]

The following elements are visible on every HTML page:

<rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
<line x1="62mm" y1="0mm" x2="62mm" y2="105mm" stroke-width="1" stroke="black" stroke-dasharray="3"></line>

I am guessing this is because they are immediately below the root

Without them, the behavior for multi-page html seems perfect: the qrcode and text is visible and consuming space only on last page

Thanks for this beautiful library !

[schoero]

I'm not sure if I understand what you mean by multi page HTML.

It appears to me that the svg does not leak the content outside: https://stackblitz.com/edit/schoero-swissqrbill-f9hcrr?file=src%2Fsvg.js

Would it be possible for you to provide an example? You could fork my example on stackblitz to get started.

[mulder999]

Thanks for coming back.

Here is how to reproduce:

1. Open https://stackblitz.com/edit/schoero-swissqrbill-y1s7kb?file=index.html
2. Click Open in New Tab in upper right
3. Click Connect to project
4. Hit <ctrl>-<p> or choose Print in your browser menu

Page 1 shows the unexpected artefact. Page 2 is perfect.

[schoero]

Thank you for the example

There are several problems I have encountered with this approach.

• The rendering of the line seems to be a bug in Chrome, as it did not appear in Safari or Firefox.
• Using position: fixed; on the svg causes the svg to render on every page, you can use position: absolute; instead.
• Because the svg is positioned absoulte, the height of the page must be set explicitly.
• Firefox renders a black background on the svg for some reason. I figured out that you can use -webkit-print-color-adjust: exact; and color-adjust: exact; to fix this.
• Setting margin: 0; on the body is important, because we use an explicit page sizes and the pages would overflow otherwise. This would cause the qr bill to be rendered on the wrong page.
• Setting overflow: auto; is also important, because the margins of the h1 elements would also cause an overflow.

I have an updated example: https://stackblitz.com/edit/schoero-swissqrbill-qm9fyn?file=index.html

It looks correct when printing mode is enabled in the devtools of Chrome, Firefox and Safari. But the printing preview you get using ctrl + p is accurate only in Chrome.

I don't have access to a printer right now, so there may very well be other issues with my updated code. Print to PDF also results in an invalid output, so there are still other problems with my updated code.

After all I don't think that this is an issue with swissqrbill. It just seems to be very challenging to get a HTML document to render correctly in printing mode.

[mulder999]

Thanks for your investigations and hints. I will try to see which of your findings I can apply to my case without having to fully refactor the invoicing page generated by the accounting software. Luckily most of my invoices are one pager and it works perfectly in that very specific case.

[schoero]

I'm closing this issue, as this is not something that can be fixed in swissqrbill. If you have additional questions, you can still comment or open a new issue.