Placing a FIXED element last on a wrapping page causes incorrect page wrapping and overlapping

[jrtell1]

Describe the bug When a fixed element ends up last on a wrapping page it causes the pagebreak to be incorrectly done and makes the page elements shrink and overlap.

Note: If the fixed element has an absolute position it's fine as it doesn't take up space on the page. So the bug seems to be that the layout engine or whatever does not properly wrap when the fixed element comes last on that page and an extra element which probably should've ended up on the second page actually ends up on the first page so we no longer have enough space causing elements to overlap.

To Reproduce Steps to reproduce the behavior including code snippet:

1. Create a new <Page>
2. Add a few <Text> elements with enough text to wrap to more than 1 page
3. Add a <View fixed debug style={{ height: 200 }}></View> element after the above added <Text> elements
4. You should now see the wrapping elements (The texts etc) starting to overlap each other

Buggy wrapping on all pages: React PDF REPL

Steps to reproduce the behavior including code snippet on first page only:

1. Create a new <Page>
2. Add a few <Text> elements with enough text to wrap to more than 1 page
3. Add a <View fixed debug style={{ height: 200 }}></View> element so it ends up last on the first page but not last on the consecutive pages.
4. You should now see the wrapping elements (The texts etc) starting to overlap each other on the first page only.

Buggy wrapping on first page only: React PDF REPL 2

Expected behavior If a fixed element ends up last on a page it should not push the other elements to overlap.

Screenshots Screenshot from first REPL link:

If you then move the causing fixed element as the second REPL link does, first page is buggy but all consecutive pages are fine:

Desktop:

• OS: Windows
• Browser: Chrome
• React-pdf version: 3.1.14

[jrtell1]

Additional note: This does not seem to be limited to the Page level wrapping. All components that wrap seems to be affected, check this REPL link for example. On the first page the text elements overlap, but on the second page it's fine.

[jrtell1]

A possible workaround (If you just want an element fixed last on every page) is to simply leave enough padding at the end of the page and absolutely positioning the fixed element. There are some cases this workaround doesn't work though.

[alesdvorakcz]

I have another super simple REPL

This issue is verry annoying and makes this (otherwise super amazing) library unusable for us... Is there any workaround for this? We need a footer on all pages, not just last one.

[jrtell1]

I have another super simple REPL

This issue is verry annoying and makes this (otherwise super amazing) library unusable for us... Is there any workaround for this? We need a footer on all pages, not just last one.

If you read my last comment right before yours, you can solve the issue, unless you have a footer height that is dynamic per page. Here's an REPL example

It works by adding a Bottom Padding on the entire page and just making the footer position: 'absolute'

[alesdvorakcz]

Thank you for your suggestion, unfortunately my footer contains variable text so I don't know its height even when it is not dynamic per page.

[jrtell1]

Ah, I understand, yeah then there's no workaround that I know of