script element and element with no effect on the layout (ie. display:none) should not produce a new page
Consider the following page: display-none.html.
As you can see I have only a cover page and no content (apart from the <script>
element and a display:none
element).
I would expect a single page PDF but Paged.js produces two pages. The second page contains nothing visible:
<div class="pagedjs_area">
<div class="pagedjs_page_content" style="column-width: 624px; column-gap: calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left));">
<div>
<div style="display: none;" data-ref="5c744c7e-9caa-412b-9758-3709f55a145b" data-previous-break-after="page"></div>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js" data-ref="349f937a-d11a-4743-8335-ad1096a2d1ad"></script>
</div>
</div>
</div>
I can also reproduce this issue if I remove the <div style="display: none;"></div>
element. In this case the second page only contains the Paged.js <script>
element.
I think Paged.js should ignore <script>
elements because they don't affect the layout.
In other words, Paged.js should not append <script>
elements in the final layout because I believe that they should already be executed when Paged.js does the relayout.
Please note that it's possible to define CSS rules on a script
element:
script {
display: block;
padding: 80px;
background-color: red;
}
I think that the general rule is, ignore element with display: none
and without any page break directives.
Is there other CSS rules defined on display: none
elements that might affect the layout?