diegomura / diegomura/react-pdf

<View fixed> with position: absolute + bottom + auto-height triggers Yoga top overflow on long documents

Open
#3,416 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

## Summary

A `` (or ``) with `position: absolute` + `bottom` + auto-height (no explicit `height`) on a long enough document accumulates a per-page `top` value that eventually overflows PDFKit's ±1e21 numeric limit, throwing `Error: unsupported number: -X.XXe+21` and aborting the render. The threshold depends on document length and content density — short documents render fine, longer ones crash.

This is the most-documented pattern for fixed footers / page numbers (see [react-pdf.org/advanced](https://react-pdf.org/advanced) "Dynamic content" + "Page wrapping" sections), so the failure mode is reachable through ordinary use.

## Version

`@react-pdf/renderer@4.5.1` (the latest published as of filing). Companion package versions:

- `@react-pdf/pdfkit@5.1.1`
- `@react-pdf/render@4.5.1`
- `@react-pdf/layout@4.6.1`
- `@react-pdf/primitives@4.3.0`

Node 20+, server-side render via `renderToBuffer`. Reproduces both locally (Windows + macOS) and on Vercel.

## Minimal reproduction

```jsx
import {
Document,
Page,
Text,
View,
StyleSheet,
renderToBuffer,
} from '@react-pdf/renderer';

const styles = StyleSheet.create({
page: {
padding: 56,
fontSize: 11,
lineHeight: 1.5,
},
filler: {
marginBottom: 12,
},
footer: {
position: 'absolute',
bottom: 36,
left: 56,
right: 56,
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 8,
borderTopWidth: 0.5,
borderTopColor: '#cccccc',
},
footerText: {
fontSize: 8,
color: '#666666',
},
});

// Generate enough content to span ~20+ pages of natural-flow text.
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
const FILLER = Array.from({ length: 400 }, () => (
{lorem.repeat(8)}
));

const Doc = () => (


{FILLER}

CASE-REF

`Page ${pageNumber} of ${totalPages}`
}
/>
Attribution



);

(async () => {
const buffer = await renderToBuffer();
console.log('rendered', buffer.length, 'bytes');
})();

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.