Partial text overlap at the top of some pages and missing headers/footers
When a PDF is generated, there is partial text overlap on some pages and no headers or footers are generated on other pages.
For example with the following code (I attach the full version, here I report only an excerpt)
<html>
<head>
<style>
@page {
size: a4;
margin: 30mm 20mm 30mm 20mm;
}
@page {
@top-center {
content: "MyDocument";
}
@bottom-center {
content: "Lorem ipsum example";
}
counter-increment: page;
}
@page {
@bottom-left {
content: counter(page) " of " counter(pages);
font-family: Arial, Sans Serif;
}
@bottom-right {
content: "Example";
}
}
</style>
</head>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js">
</script>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
...... (reported in attachment)
</div>
</body>
</html>
As you can see at the beginning of the second page the text is overlapped and in the third page both header and footer are missing.
I am using Linux Mint 19 Cinnamon and pagedjs-cli at the commit 8ba147d69698ce594af9a73cf7537d6ac2b94022).
Here the complete HTML and the generated PDF: document.html document.pdf