diegomura / diegomura/react-pdf
White line appears at page edges when setting background color in PDF
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
When using Microsoft Edge, a thin white line appears at the edge of the page when setting a background color on a Page component. The position of the white line depends on the page orientation:
- In landscape mode: white line appears at the bottom
- In portrait mode: white line appears on the right side
Importantly, this issue is browser-specific and does not occur in Chrome.
### Reproduction Steps
1. Create a new React project with the following dependencies:
```json
{
"next": "^14.2.18",
"@react-pdf/renderer": "^4.1.6"
}
```
2. Implement the following component:
```jsx
const PdfGenerator = () => {
return (
This is a page with a custom background color
);
};
```
3. Render the component in Microsoft Edge
4. Observe the thin white line at the edge
### Expected Behavior
The background color should extend fully to all edges of the page without any white lines appearing, as it does in Chrome.
### Actual Behavior
In Microsoft Edge only:
- A thin white line appears at the bottom edge in landscape orientation
- A thin white line appears at the right edge in portrait orientation
The issue does not occur in Google Chrome, where the background renders correctly.
### Environment
- @react-pdf/renderer version: 4.1.6
- Next.js version: 14.2.18
- Browser: Microsoft Edge
### Additional Notes
- Issue is reproducible only in Microsoft Edge
- Works as expected in Google Chrome
- The white line appears consistently:
- Despite absolute positioning
- Despite zero margins and padding
- Despite 100% width and height
- With various background colors
- The issue appears in both development and production builds
### Additional Context
As it seen on the image there is a thin white line at the right side

This is how I expect it to be

Contributor guide
Assessment
This issue has not been assessed yet.