vivliostyle.js Vivliostyle tries to generate infinite pages

Build or preview of the following HTML does not finish:

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>羅生門</title>
    <style>
        body {
            display: flex;
        }
        
        @page {
            size: A4;
        }
        
        @-epubx-page-template {
            .page-header {
                -epubx-flow-into: page-header;
                -epubx-flow-options: static;
            }
            @-epubx-page-master {
                @-epubx-partition body {
                    -epubx-flow-from: body;
                    left: 3rem;
                    right: 3rem;
                }
                @-epubx-partition page-header {
                    -epubx-flow-from: page-header;
                    left: 3rem;
                    right: 3rem;
                }
            }
        }
    </style>
</head>

<body>
    <div class="page-header">羅生門</div>
    <p>或日の暮方の事である。一人の下人が、羅生門の下で雨やみを待つてゐた。</p>
    <p>廣い門の下には、この男の外に誰もゐない。唯、所々丹塗の剥げた、大きな大きな圓柱に、蟋蟀が一匹とまつてゐる。羅生門が、朱雀大路にある以上は、この男の外にも、雨やみをする市女笠や揉烏帽子が、もう二三人はありそうなものである。それが、この男の外には誰もゐない。
    </p>
</body>

</html>

It seems that vivliostyle is trying to generate infinite pages.

Command

vivliostyle preview index.html

Version

cli: 4.8.2
core: 2.14.4

Mar 19 '22 05:03 nanikamado

@nanikamado Thanks for the bug report. It seems a problem of Vivliostyle.js core, so I transfer this to https://github.com/vivliostyle/vivliostyle.js/issues.

Mar 19 '22 09:03 MurakamiShinyu

This problem occurs because of the following reasons:

The page-header and body partitions are overlapped. (Same left and right values and omitted top value which is treated as 0.)
- In the result, the available width in the body partition becomes 0, because the page-header partition is rendered first and it intrudes the body partition.
display: flex; is specified on the body element. Note that the flex box has problem on fragmentation, see
- #594

Apr 09 '22 08:04 MurakamiShinyu

vivliostyle.js vivliostyle.js copied to clipboard

Vivliostyle tries to generate infinite pages

Command

Version

vivliostyle.js
vivliostyle.js copied to clipboard