Blury PDF Page on iOS devices

[tarbence1]

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

I use react-zoom-pan-pinch for zooming, so I recalculate the devicePiexRatio for each zoomScale. It works great on laptop with ubuntu and macbook, but on iPhone, tested with latest iOS, latest chrome, safari, firefox I get blurry image. After reading up on it, safari does not support "devicePixelRatio", but I have not found a solution.

Steps to reproduce

This is how I try to use it:

const PdfPage = forwardRef<HTMLDivElement, PdfPageProps>( ({page, height, zoomScale, isPageInView, isPageInViewRange}, ref) => { return ( <div ref={ref} className={cn(page % 2 === 0 ? 'bg-background' : 'bg-muted')}> {isPageInViewRange && ( <Page devicePixelRatio={(isPageInView && zoomScale > 1.7) ? Math.min(zoomScale * window.devicePixelRatio, 5) : window.devicePixelRatio} height={height} pageNumber={page} loading={<></>} /> )} </div> ); });

Expected behavior

As on a laptop, the pdf should be sharp when re-rendered.

Actual behavior

It will be even fuzzier than before the rendering.

Additional information

No response

Environment

• Browser (if applicable): Any browser on iOS phones. I tried with iPhone 11 and 13 with 18.3.1 and the newest Chrome, Safari, Firefox, Brave
• React-PDF version: 9.2.1
• React version: 19.0.0
• Bundler name and version (if applicable):

Edit: i know there is a similar issue, but it has been closed without a solution