iOS heavy pdf rendering issue

[airman5573]

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

iOS PDF Rendering Issue with Large Files

We're experiencing PDF rendering issues specifically on iOS devices. The browser becomes unresponsive when trying to render certain PDF files.

Steps to reproduce

With iOS phone.

1. go to https://www.modr.co.kr/journal/fola-v1n2/
2. click the '자세히 보기' button

3. you can see the react-pdf works well.

4. go to https://www.modr.co.kr/journal/tg-gallery-v1n1/
5. click the '자세히 보기' button.
6. you can see the browser is broken.

Expected behavior

I hope large pdf file would open in ios also.

Actual behavior

browser is broken with large pdf file.

Additional information

No response

Environment

• Browser (if applicable): safari latest version
• React-PDF version: 9.1.0
• React version: 18.3.1
• Bundler name and version (if applicable): vite5

[vigilantee]

This is due to the large size of the pdf.
react-pdf-viewer/react-pdf-viewer#490
It is happening on iphone 13 with ios version 18+.
We have replaced the library with adobe. (https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/releasenotes/)

This issue is not going to be fixed in next 15 days as it is end of the year and most of the community will be away from there cubicles.

Adobe is free to use and easy to plug and play.
Here is the reference

`import React, { useEffect } from "react";
import "./PdfViewer.css";

const clientId = process.env.REACT_APP_ADOBE_CLIENT_ID;

const previewConfig = {
embedMode: "FULL_WINDOW",
showDownloadPDF: false,
showPrintPDF: false,
enableFormFilling: false,
showAnnotationTools: false,
showBookmarks: false,
showThumbnails: false,
}

const PdfViewerIos: React.FC<{
url?: string;
}> = ({
url = "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK",
}) => {
useEffect(() => {
loadDoc();
}, []);

const loadDoc = () => {
// @ts-expect-error This does not exist outside of polyfill which this is doing
var adobeDCView = new AdobeDC.View({
clientId,
divId: "pdf-viewer",
});
adobeDCView.previewFile({
content: {
location: {
url,
},
},
metaData: { fileName: "agreement.pdf" },
}, previewConfig);
};
console.log('clientId....', clientId);

return

;
};

export default PdfViewerIos;
`

[airman5573]

Thank you so much for the detailed explanation and background information. I really appreciate it! By any chance, will this issue be fixed after 15 days? We’re not in a huge rush and can wait a little longer. Ideally, we’d prefer to continue using this library if possible.

[vigilantee]

what we need is a lazy load feature for the pdf on scroll as that is the only way to reduce the burst of RAM usage(crossing 384mb +) but that will also need the meta data to be maintained to allow the search feature since this feature is bit time taking to implement and there is also a possiblity that iOS fixes this on there end and release the fixes in iOS 18.2 or 18.3.

Difficult to assume this issue to be fixed soon in this library as this will need a very significant development.