Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

repeat-on-break element leaves gap when position is applied #1237

Open
sambazley opened this issue Nov 15, 2023 · 2 comments
Open

repeat-on-break element leaves gap when position is applied #1237

sambazley opened this issue Nov 15, 2023 · 2 comments
Labels
bug

Comments

@sambazley
Copy link

I am trying to create a PDF that has a footer on each page. The footer has repeat-on-break: footer; and position: running(footer);. This positions a footer on each page as expected, but a blank space is left where the footer would have been without position: running(footer);.

This problem also affects elements that have repeat-on-break: header; and position: absolute;.

To Reproduce
The simplest way I can reproduce this issue is with the attached file. The .page span spans two pages. The blank space is at the bottom of the first page.
test.html.txt

Expected behavior
The gap should be filled with content from the next page.
@sambazley sambazley added the bug label Nov 15, 2023
@MurakamiShinyu
Copy link
Member

@sambazley Thanks for reporting the issue.

It seems that repeat-on-break works well only on static positioned elements, and has problem with position: absolute or position: running() elements.

By the way, for running footers (with position: running()), repeat-on-break should not be necessary. Check the example:

<!DOCTYPE html>
<html>
    <head>
<style>
@page {
    size: A4 portrait;
    margin-bottom: 5cm;
  
    @bottom-center {
        content: element(footer);
    }
}

#abs {
    background: red;
    width: 50%;
    height: 5cm;
    position: running(footer);
    display: block;
}

.page {
    background: green;
    width: 100%;
    display: block;
}
</style>
    </head>
    <body>
        <span id="abs">abs</span>
        <span class="page">
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>
        </span>
    </body>
</html>

@sambazley
Copy link
Author

@MurakamiShinyu thank you for your help. This solution works for the PDF, although moving the footer element to the top of the body element means the HTML file displays the footer at the top of the page. Ideally the HTML page will have a single footer at the bottom of the document and the PDF will have a footer at the bottom of each page.

I've found a work around using your example with the following:

body {
    display: grid;
}

#abs {
    order: 1;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MurakamiShinyu @sambazley