6

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.

Garbled Text Example

(Sample at 1.5 scale)

enter image description here

(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.

Malcolm G
  • 504
  • 5
  • 11
  • My team is having this issue as well but so far only a single user's computer. We're investigating and will keep you posted if we figure out what's going on. – Jesse Jul 12 '22 at 14:07
  • @Jesse I spent a week looking into this and never came up with a satisfactory solution. Our team decided to add an option to the pdf viewer for the user to switch render modes. That way, if 'canvas' isn't working, they can switch to see the text with the 'svg' option, even though the pdf's images don't load in 'svg'. We also added a button for them to report problematic pdfs so we can continue to look into this. I will update if we get any additional information. – Malcolm G Jul 14 '22 at 17:51
  • @KJ I can't change Chrome flags on users' computers. – Michał Perłakowski Sep 02 '22 at 18:31
  • @KJ If you confirm that, please add it as an answer. – Michał Perłakowski Sep 02 '22 at 20:31

3 Answers3

5

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 is still open in react-pdf, though I have seen it mentioned by other pdf.js users since mid 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 https://github.com/wojtekmaj/react-pdf/issues/1025 enter image description here enter image description here

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.

image

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.

enter image description here

K J
  • 8,045
  • 3
  • 14
  • 36
  • 2
    This is a very helpful answer. Thank you for the research. But I do agree with @Michał Perłakowski. I can't control the Chrome flags on my users' computers, so while this does help, it doesn't quite solve the problem. – Malcolm G Sep 08 '22 at 22:18
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

Anriza Kurnia Aziiz
  • 28
  • 5
  • 1
    I have confirmed that this issue has been fixed in the latest version. Thank you so much for pointing that out. – Malcolm G Apr 18 '23 at 22:38
1

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

Asif Iqbal
  • 502
  • 6
  • 24