Some iOS phones display a white screen of PDF

[xizijian]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Here's a snippet:
import { Document, Page } from 'react-pdf';
import { pdfjs } from 'react-pdf';
export default function() {

const [numPages, setNumPages] = useState(-1);
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

return isMobile() ? (
	<Document
		className="pdf"
		file={pdfSrc}
		onLoadSuccess={({ numPages }) => {
			setNumPages(numPages);
			
		}}
		onLoadError={error => {
			console.error('pdf：',error);
		}}
		loading={''}
	>
		{numPages > 0
			? new Array(numPages).fill(0).map((item, index) => {
					return <Page loading={''} width={width} key={index} pageNumber={index + 1} />;
			  })
			: ''}
	</Document>
) : (
	<iframe src={pdfSrc} width="100%" height={iframeHeight} />
);

}

Steps to reproduce

On iOS 17.1.1, the white screen is displayed and there is no error, how can I solve this situation?

Expected behavior

Display PDF normally

Actual behavior

Now it's a white screen

Additional information

src: https://m.ximalaya.com/gatekeeper/xmkp-ort-h5/xikePreviewPdf?pdfSrc=http://fdfs.xmcdn.com/storages/9e45-audiofreehighqps/47/09/GKwRIDoJKNaaABAAAAJ9HidT.pdf&lessonName=L11%20Is%20this%20your%20shirt?&businessType=11

Environment

• Browser (if applicable): 15.6.1
• React-PDF version:5.0.0
• React version: 16.13.1
• Webpack version (if applicable):

[dbielak]

I faced the same issue, any thoughts about it?

[wojtekmaj]

Potential duplicate of #1149?

[0shevchuk]

I have a similar issue with usage on the iPhone 13 mini. I get just a white screen with the correct dimensions but without visible content. (The console output is clear, without any errors or warnings, so not sure that this is the duplicate of #1149)

React-PDF version:7.1.2
React version: 16.13.1

On iPhones with larger screens or Androids, works great.

[melisaltunal]

I have a similar problem. I use react-pdf in my project. While it works smoothly on Android devices, the project does not open directly on iOS devices and a white screen appears. This problem occurs especially in iOS 17.x.x.

I cant specify a specific phone model, but this problem is mostly experienced with new model iOS phones. Interestingly, this is not the case every time; another user using the same phone model and the same iOS version can view the PDF.

Environment:
React-PDF version: "^5.7.2",
React version: "^17.0.0",
Webpack version: "^5.75.0"

This link is opened using webview in a mobile application.

[wojtekmaj]

Please check #1149 and also check for any errors in callbacks React-PDF offers.

[melisaltunal]

Thanks for the quick response :)
But if the problem was as you say, all iOS devices of the same model would have similar problems, right?
But in my case, sometimes this problem occurs and sometimes it does not. And since it's on the client device I can't catch the error. This problem has never occurred on the web browser or Android.
Could it be related to Webpack? or JavaScript heap out of memory error?

[nedkamburov]

I managed to fix this by just adding
devicePixelRatio={1} to the Page component. This is set to 1 by default but this seems to fix it.

<Page
    pageIndex={0}
    width={2000}
    renderAnnotationLayer={false}
    renderTextLayer={false}
    devicePixelRatio={1}
 />

[melisaltunal]

<Page pageNumber={page} width={window?.innerWidth} height={window?.innerHeight} pageIndex={0} renderAnnotationLayer={false} renderTextLayer={false} />

My page component is here. I can't use devicePixelRatio, maybe because I'm using react-pdf 5.7.2. Actually, when I click on the checkbox in the project, I open my PDFs in a pop-up. But the white screen is taken while the project is being rendered. I can't even see the checkbox.

[focusaway]

@melisaltunal Looks like I just solved it easily. try changing the "renderMode" to svg in the Document. Works on version 5.7.2 and 6.2.2

[wojtekmaj]

@focusaway SVG render mode is deprecated, and will be removed in a future version.