Bug: page fit zoom calculation is wrong

[xiaohanyu]

Let us align first,

• page width: zoom pdf to make sure that the width of the pdf paper fits 100% to the viewer's width
• page fit: zoom pdf to make sure that the height of the pdf paper fits 100% to the viewer's height
• updated: page fit: zoom pdf to make sure that the height of the pdf paper fits 100% to the viewer's height when possible (page height = viewer height while width still less than viewer width, otherwise, make page width = viewer width)

It seems that react-pdf's page fit calculation is not very right when the height of the pdf viewer's container is close to > 80vh.

Demo:

2025-05-10-compressed.mp4

The problem:

• when the height of the container is close to 80vh or more on a 27' screen (my hardware), page fit and page width option behaves the same, as a comparison, I show a working example on the right side of the demo.

[david-reactpdf]

Hi @xiaohanyu, thanks for the feedback. I wasn't able to reproduce this issue and want to confirm the React PDF version you're using.

Also, would you mind sharing your code snippet on configuring the height of the container? Feel free to share it here or via david@react-pdf.dev.

[xiaohanyu]

Hello @david-reactpdf ,

Let me give you another demo with the official next.js repo: xiaohanyu/starter-rp-next-ts@3c83eeb

Demo:

2025-05-14-compressed.mp4

The issue:

• when the height of <RPDefaultLayout> changes from 1026px to 1027px, then page fit suddenly becomes page width.

[xiaohanyu]

Meanwhile, another minor issue, sometimes style={{ height: "1026px" }} in <RPDefaultLayout> is not fully respected when the project boot up or occationally with HMR.

Not sure why, though not a big issue for me.

[xiaohanyu]

Another demo:

• code: xiaohanyu/starter-rp-next-ts@3c83eeb
• browser: edge with InPrivate tabs to avoid various cache/cookie, etc
• testing with next build for production env (HMR still having some issues with CSS)

2025-05-14-12-compressed.mp4

You can see that the issue still exist, page fit calculationi becomes page width when the height changes from 1026px to 1027px.

pnpm dependency:

$ pnpm list
Legend: production dependency, optional only, dev only

starter-rp-ts@0.1.0 /Users/hanyu/tmp/starter-rp-next-ts (PRIVATE)

dependencies:
@pdf-viewer/react 1.5.0
next 14.2.26
react 18.2.0
react-dom 18.2.0

devDependencies:
@eslint/eslintrc 3.3.1
@types/node 20.17.46
@types/react 18.3.21
@types/react-dom 18.3.7
eslint 9.26.0
eslint-config-next 14.2.26
postcss 8.5.3
tailwindcss 3.4.17
typescript 5.8.3

# hanyu @ hanyu-max-72914 in ~/tmp/starter-rp-next-ts on git:main o [12:20:27]
$ pnpm why pdfjs-dist
Legend: production dependency, optional only, dev only

starter-rp-ts@0.1.0 /Users/hanyu/tmp/starter-rp-next-ts (PRIVATE)

dependencies:
@pdf-viewer/react 1.5.0
└── pdfjs-dist 4.10.38 peer

Let me know if you need further info, thank you and thanks for this excellent lib, keep on the good work.

[david-reactpdf]

@xiaohanyu

Thanks again for the detailed demo and context (super helpful!).

Just wanted to let you know that the fix for the page fit recalculation issue is ready.
You can try it out by installing the release candidate: @pdf-viewer/react@1.6.1-rc.1

Would really appreciate it if you could give it a test in your setup and let us know if the issue is resolved on your end.

Thanks again for flagging this, and for the kind words! 🙏

[xiaohanyu]

Nice nice, would surely give the rc release a try, hold on!

[xiaohanyu]

Just verified, it works as expected for page fit issue:

2025-05-30-compressed.mp4

Thank you!

---

As you can see, the CSS HMR still not working fully, it need an additional refresh to make the heigh update work, just FYI.