How do I fix garbled text in my react-pdf viewer?

Question

I have created a pdf viewer using react-pdf. When I display certain pdfs, the text is choppy and unreadable. I have tried zooming in and out of the document and it is choppy in different ways at different scales. Sometimes the text even looks okay at a certain scale after zooming out and then zooming back in.

(Sample at 1.5 scale)

(Sample at 1.6 scale)

At first, I thought it might be an issue with react-pdf, but I saw that react-pdf is basically a wrapper around PDF.js. I found that I can replicate the issue in the PDF.js demo page.

Unfortunately, I'm working with a pdf that contains identifying information, so I can't share the full pdf or full screenshot. I'll include as much as I can figure out to share.

What I have tried

• My initial thought was that maybe the component was rendering small initially and then had issues scaling up. So I made the initial size really large, but that didn't fix it.
• I made sure that standard fonts were included following the instructions on the react-pdf home page
• I tried using pdf repair tools online to maybe fix the pdf itself. That didn't help.
• I tried changing the renderMode to 'svg' as detailed in the Document api documentation. This was the most helpful fix, as it does render the text correctly, but it then makes it so the images on the pdf don't load.

Thanks for your help/suggestions.

If I can find a way to edit the pdf to not have sensitive information, I'll try to find a place to make it available for testing. I apologize that I cannot provide that at this time. I know it's difficult to give advice when you can't replicate it yourself. I'll work on that.

Answer 1

From a programming point of view there is only "Providing a standardFontDataUrl and disabling the font face" (see later), however it affects many pdf.js based code developers outputs, thus I consider as still "OnTopic"

This issue was still open in react-pdf in versions up to January 2023,

It was mentioned by other pdf.js users since mid 2022 year (MS or Chrome update ?) , so unsure if it is not a wider fail affecting Mozilla PDF.js code users.

https://github.com/wojtekmaj/react-pdf/issues/1010 Says issue wass fixed in version 6.2.2 https://github.com/wojtekmaj/react-pdf/releases/tag/v6.2.2 so ensure you have that or later version.

https://github.com/wojtekmaj/react-pdf/issues/1025

There semes to be earlier reports back in Early March and then later suggestions to change win 10 drivers. However also reported by win 11 Pro users. PDF.js versions from 2.8.335 to 2.14.305, and it doesn't affect version 2.7.570. so partially down to updated versions ! But seen only in Chromium.

It is entirely possible that we started doing something that trips Chrome,

The symptoms seem to be hardware or settings orientated since it is reportedly seen on some identical groups of users but not affecting others.

toggling back and forth between single page and multi-page views the issue resolves. It also seems dependent on the resolution or appears on some machines and not others so it is a little tricky to repro.

I am not getting it personally, but a guy in my team get it.

Unclear which browsers are affected but looks like its a chromium / web kit rendering bug ?

Several browsers have been tested and only chrome faces this.

My colleague gets the same in Edge Version 101.0.1210.47 (Official build) (64-bit) and Brave (1.38.118 Chromium 101.0.4951.67) Will edit the issue

The suggested workaround is :-

Providing a standardFontDataUrl and disabling the font face fixes the issue.
if we disable Accelerated 2D canvas in chrome://flags then the preview appears nice and okay. But since this flag is on by default so user see the pixelated preview. Unless we ask them to turn off this flag.

Figured out that this only happens when hardware acceleration is enabled in your Chrome settings.

When its turned off the issue does not happen.

In address bar paste chrome://gpu or edge://gpu etc (its a long report of current onboard fixes) in my case (currently unconfirmed via reboot for my Edge) is showing Accelerated 2D canvas is unavailable: either disabled via blocklist or the command line. Disabled Features: 2d_canvas, thus I cannot see problems.

To change setting you can use
chrome://flags/#disable-accelerated-2d-canvas
but its a manual choice between options.

so on reboot I see

Graphics Feature Status
Canvas: Hardware accelerated
Canvas out-of-process rasterization: Disabled

but have little problem with the domo (except normal fuzzy text as pixels) so either Edge update or my hardware is not visibly affected or my default settings are reasonable.

Answer 2

This issue has been finally fixed in the latest version of react-pdf library. Check here: https://github.com/wojtekmaj/react-pdf/releases/tag/v6.2.2

Answer 3

I also faced the same error and I fixed it by setting render mode to canvas (earlier it was SVG) and scale value to more than 1. Try scale = 1.5