Text overlaps or squashes at page breaks in dynamic content

[WagdySamih]

Describe the bug
Dynamic content created and adjusted by the user sometimes suffers from page-breaking issues, e.g., text gets overlapped or squashed. This issue was not present in @react-pdf/renderer version ^3.4.4 and appeared after upgrading to 4.3.2. It may be related to this fix: PR #2822.

To Reproduce
There is no deterministic way to reproduce. The issue occurs occasionally when modifying PDF content, for example:

• Adding more text
• Changing font size
• Adjusting line height or spacing

Notes

• The same ways of reproducing it can be used to fix it (e.g., change content height).
• The issue can also happen when wrap={true} is used.
• The issue can happen on a one-column layout as well.
• These examples, when wrap={true} weren’t able to produce the issue on REPL (see attached screenshots # 2 and # 3).

Reproducible example: react-pdf REPL

Expected behavior
Text should show normally without being overlapped or squashed

Screenshots
# 1

# 2

# 3

• OS: MacOS
• Browser: Chrome
• React-pdf version: 4.3.2