PDF not rendering correctly for some devices

[abhikarsh-gupta]

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

Working with a very basic <Document file={{ url: decodedUrl, }} onContextMenu={e => e.preventDefault()} onLoadSuccess={onDocumentLoadSuccess} className="pdf-viewer-container" onPassword={handlePassword} > {Array.from(new Array(numPages), (el, index) => ( <div style={{ border: "1px solid black", marginBottom: "2vw" }}> <Page key={page_${index + 1}} pageNumber={index + 1} width={pdfWidth} // pdfWidth = 800 /> </div> ))} </Document> setup.

Everything seems to be working perfectly on my device. but some users are reporting broken text, improper rendering of the text in the pdfs.

I am unsure as to what is causing the issue. Apologies for formatting of code.

Any help will be greatly appreciated

Attaching below images of error.

Steps to reproduce

I don't have any clue right now.

Expected behavior

The pdfs should render with proper formatting irrespective of device.

Actual behavior

pdfs not rendering properly.

Additional information

I cannot attach the file due to security and compliance reasons.

Environment

• Browser (if applicable): chrome 109
• React-PDF version: 5.7.2
• React version: 17.0.2
• Webpack version (if applicable):

[Roong-z]

It's a similar phenomenon.

I wrote it with a very basic syntax, and it only breaks the PDF area on certain devices (the whole galaxy s21).

I've checked all the issues, upgraded the version, checked the webpack settings, etc. but I couldn't solve it.

It would be great to know the cause of the problem.

My environment
Browser (if applicable) : chrome
React-PDF version : 5.2.0 & 5.7.2 & 6.2.2 All failed
React version : 17.0.2 & 18.2.0 All failed
Webpack version (if applicable) : 4,5 All failed
Note that the server is configured with a spring boot.

<Document className={"pdf-document"} file={file} onLoadSuccess={onDocumentLoadSuccess} options={options} // onClick={handleDocumentClick.bind(this)} // style={{border: "3px solid blue"}} > <div scale={scales} style={{ width: 0, height: 0, position: "relative", backgroundColor: "white", opacity: 1, border: 0, }} > {pageLoadCompl && ( <CompInfoList onRemove={onRemove} onUpdate={onUpdate} docData={docData} pageData={pageData} handleBackdropClose={props.handleBackdropClose} /> )} </div> {Array.from(new Array(numPages), (el, index) => { return ( <Page key={page_${index + 1}} inputRef={ pageNumber === index + 1 ? (ref) => ref && ref.scrollIntoView() : null } pageNumber={index + 1} onRenderSuccess={onPageRenderSuccess} renderTextLayer={false} renderInteractiveForms={false} style={{border: "3px solid cyan"}} scale={scales} /> ); })} </Document>

[codeskills-nl]

HI, some users mention the same problem here.
I found the following issue: mozilla/pdf.js#14641 at pdf.js

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[wojtekmaj]

This has been resolved in #1010 and released in v6.2.2.