Header & Footer moves up after PDF file is generated

[sharathm89]

Header and Footer moves up after the PDF file is generated. This doesn't happen in website but only in PDF.

Note: This issue starts when Table overflows to the next page.

Below is the github repo link which demonstrates the issue. (checkout the readme file)

Repo Link

Observe the video where header slightly moves up.

Screen.Recording.2023-07-20.at.11.13.10.PM.mov

test-header.pdf

[sharathm89]

@PejmanNik Sample code setup is done in codesandbox...

https://codesandbox.io/s/report-web-app-mm4l5l?file=/src/views/table/index.js

Try to do the print preview and download pdf and keep observing the header in each page. At the end of the pdf the header shifts slightly up which causes issues for other components. (more pages more header shifts happen)

Direct Output link from codesandbox

[PejmanNik]

this is an interesting issue🤦‍♂️I think this is an issue in the chromium (or specifically in PDFium) project. can you please try to create the same header pattern with pure HTML and save it to PDF and check the result?

[PejmanNik]

it is related to Page size, reducing the page height can solve the issue: https://codesandbox.io/s/report-web-app-forked-stz333?file=/src/App.js

I'm not sure why, but Chromium Save to pdf use different dimension for page sizes

[sharathm89]

Specifying the exact dimensions works dimension={{ height: "295mm", width: "210mm" }}

Thanks 🙏