Screen-only media queries effecting print output
I'm not sure if this one is actually paged-cli, or something deeper in Chromium.
What we're seeing is a screen only
media query in an html file have an effect on the PDF output of the CLI (but not on the debug output). Specifically, it appears to be causing some sort of reflow bug where a floated <figure>
causes the bottom of the page to be cutoff.
When we remove the media query from the file altogether, the PDF and debug output match and there is no cutoff issue.
Reproduce:
- Run
pagedjs-cli
on attached html file in debug mode. - Should see something like the following:
- Run with output mode, and it produces the following PDF, with much of the text cut off: result.pdf
- Remove the following from the html file (lines 1484 - 1487):
.editor figure {
float: none !important;
width: 100% !important; } }
- Re-run debug mode, and you'll see a similar result to the above.
- Re-run PDF output mode, and it produces the following PDF, with no text cut off: result_no_media_query.pdf
File: float.html