diegomura / diegomura/react-pdf

White line appears at page edges when setting background color in PDF

Open
#3,040 0 comments 0 reactions 0 assignees View on GitHub
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
![Image](https://github.com/user-attachments/assets/ae42127e-ff40-49b5-a018-d1e9d760b405)

This is how I expect it to be

![Image](https://github.com/user-attachments/assets/76b49c85-da51-41a5-a31a-ef6b49d7e621)

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.