PDFs not rendering perfectly after Chrome update

[fgouvea10]

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

After a chrome update the pdf no longer renders correctly. It looks like it cuts out some words. Several browsers have been tested and only chrome faces this.

Steps to reproduce

Just render a pdf and you'll see

Expected behavior

Don't render with cuts

Actual behavior

Rendering with cuts (white spaces between words)

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Webpack version (if applicable):

[juuso-turunen]

I see this problem on Edge (Chromium) as well.
I'm running Edge version 102.0.1245.44.

[iqbalhasnan]

One of our colleagues is getting this

[wojtekmaj]

Any sample PDFs to reproduce this issue?

BTW just landed #1019, this might fix it

[sborzova]

Any sample PDFs to reproduce this issue?

BTW just landed #1019, this might fix it

Do you have any idea when it will be released? :) thanks!

[wojtekmaj]

@sborzova 6.0.0-beta.2 is the latest available release with this PDF.js update.

[fgouvea10]

Any sample PDFs to reproduce this issue?

BTW just landed #1019, this might fix it

You can try render a pdf file with chrome and this will happen. looks like some white spaces under the words

[MatanYemini]

Is the fixed released? I am seeing the same issue. Several clients already complained

[fgouvea10]

Is the fixed released? I am seeing the same issue. Several clients already complained

I don't think so, I'm still having the problem too

[MatanYemini]

I have tried 6.0.0.3-beta - still have the issue. I am not getting it personally, but a guy in my team get it.

the 6.0.0.3-beta version includes the change :(

[MatanYemini]

Seems to happen only on Edge for him @wojtekmaj I will try to check in the main lib

[hugrave]

It happens also to us, only to some colleagues of mine!

[znzaznz]

the same to me,so how can I fix it?

[Greg-Hitchon]

It is hard for me to reproduce this reliably (but from here reported working on pdf.js 2.7.570 which from a browse of the react-pdf releases would be react-pdf 5.3.2 (assuming 2.6.347 also does not have the issue).

This obviously might introduce other issues, but could be worth a try. Using the "svg" render mode hack is not useful if you have images to display.

[rahulmahajannn]

facing the same issue.

is there any fix available for the same?

[fgouvea10]

@rahulmahajannn nothing yet... :(

[Nahd92]

I've just recently got this issue too.. Anyone got a fix for this? It seems that the text got padding because when selecting the text there seem to be duplicated text.

[wojtekmaj]

Guys,
React-PDF 6.0.0-beta.3 was using PDF.js 2.14.305. React-PDF 6.0.0-beta.4 and up (including final v6) uses 2.16.105. Give v6 another try!

If you're still experiencing this issue on v6, consider:

• Creating a CodeSandbox with full repro or sharing a PDF you have a problem with
  • Share your full configuration of the machine you're reproducing this problem with (OS, OS version, browser, browser version).
• You may use e.g. Yarn resolutions to force PDF.js version (pdfjs-dist) to a certain version number. You may give 3.0.279 a go, even though it didn't ship in React-PDF yet, so I can't guarantee it working at all.

If you cannot update to v6 yet, you may also use e.g. Yarn resolutions to force PDF.js version (pdfjs-dist) to a certain version number. It appears that while React-PDF 5.7.2 originally shipped with PDF.js 2.13.216, both updates to 2.14.305 and 2.16.105 were as easy as bumping the version number.

[AlessandroAMD]

https://react-pdf.org/repl - this also looks bad for me

disabling HW acceleration from the browser fixes this but you can't force a setting like this to all app users

[ilhamkaddourii]

Hi, any updates regarding this issue? I am facing the same thing but no luck.

[wojtekmaj]

@ilhamkaddourii Which React-PDF version are you using?

[ilhamkaddourii]

@wojtekmaj i was on 5.4.0-beta.2 and then upgraded to 5.7.2. somehow v6 does not work for me, the image is not loaded at all

[wojtekmaj]

5.x branch will forever stay this way. PDF.js both received important fixes for the latest browsers and some breaking changes preventing us from running it on legacy browsers.

[fgouvea10]

@wojtekmaj the new beta version is not working fine here. However, my team and I have noticed that the problem now is that on some computers this does not happen. It is working fine on mac devices and some lenovo laptops but on some dell laptops the experience is really bad.

[ilhamkaddourii]

if anyone can explain why this happens so often? and without library change? how browsers update affect the render flow of pdfs?

[Greg-Hitchon]

if anyone can explain why this happens so often? and without library change? how browsers update affect the render flow of pdfs?

I am pretty sure this is the same issue and has some more detailed discussion

[DonikaV]

same with 6.2.0

[DonikaV]

@wojtekmaj how i can use version 3 if am getting an error
{
"message": "The API version "2.16.105" does not match the Worker version "3.1.81".",
"name": "UnknownErrorException",
"details": "Error: The API version "2.16.105" does not match the Worker version "3.1.81"."
}
?

[DonikaV]

Hey @wojtekmaj Maybe if we add add here
https://github.com/wojtekmaj/react-pdf/blob/main/src/Page/PageCanvas.jsx#L120

get canvasContext() {
        return canvas.getContext('2d',  {
         willReadFrequently: true,
});
      },

It will fix it?

[callabr1]

Hi all!
I am a QA tester for a webapp that uses react-pdf/pdf.js to render PDFs and we had a few customer reports about this issue with Chrome/Edge as well. I was originally unable to reproduce the issue until the company sent me a specific laptop...

From all the testing and investigation I've done, the issue seems to be tied to having the following four things:

1. App rendering PDFs using react-pdf/pdf.js
2. Chromium browser
3. Intel Iris Xe Graphics GPU (or similar integrated GPU)
4. Specific PDF fonts (as the issue is not reproducible with all PDFs)

I have two different Windows ThinkPad laptops; one with a nVidia GPU and the other with the Intel Iris. I can only reproduce the issue on the Iris book, not the nVidia one. This goes in line with our clients' system specs, as well.
There are other integrated GPUs that will also see the issue but the Iris seems to be the most common. I could provide some other affected cards if needed, though.

I see @DonikaV pushed a potential fix, let me know if you'd like me to somehow test it on my affected machine (keep in mind it's a work laptop and enterprise security guidelines need to be respected). I know the test laptop I have can repro the issue, along with various affected PDFs I have from clients. Hopefully narrowing it down to GPU can help!

[callabr1]

Update from the other thread, which was Closed:

I tried to reproduce on the affected machine with the following jsfiddle setups suggested by other users:
https://jsfiddle.net/cxrznbso/1/
https://jsfiddle.net/3kt6v82s/1/

I was unable to reproduce on my affected machine through jsfiddle, even after changing to various different fonts, sizes and displayed text.

I've created some PDFs from Google Docs with various fonts to try other apps that use pdf.js to view documents. Surely enough, I can reproduce the blotchy text easily when trying out the demo page for pdf.js express:
https://pdfjs.express/demo
I see cut-off text on the default document, as well as the various docs I've created:

I also see the issue on the affected machine if I view the react-pdf demo page as another user pointed out:
https://react-pdf.org/repl

Keep in mind this only happens when four conditions are met from what I can tell:

1. Webapp rendering PDFs using react-pdf/pdf.js
2. Chromium browser
3. Specific Integrated Laptop Graphics Card (mine is Intel Iris Xe)
4. Specific Fonts in the PDF (Roboto, Arial, Calibri can reproduce, many other fonts affected)

[MatanYemini]

No solution yet... BTW, from my debugging sessions with customers, it seems that it is fixable by zoom in

[callabr1]

No solution yet... BTW, from my debugging sessions with customers, it seems that it is fixable by zoom in

For me it depends how big the document is. For example, if using the default demo doc on https://pdfjs.express/demo I need to fiddle with both the webapp zoom and browser zoom levels to completely fix it; each zoom control seems to change how characters are rendered. Also when in a document with multiple pages most webapps won't render the page until you scroll to it, which causes the user to need to re-zoom on each page.

We also tried the suggested changes in our app from https://github.com/wojtekmaj/react-pdf/pull/1207/files however the changes did not fix all documents for the affected device.

Something weird, I tried on https://mozilla.github.io/pdf.js/web/viewer.html (as well as the legacy viewer) and the issue does not occur here with the same documents and device. Seems tied to react-pdf and/or Chromium for sure.

I made a thread for Chromium as well so they can look into it:
https://bugs.chromium.org/p/chromium/issues/detail?id=1404710

[callabr1]

Hi all, this issue seems to be resolved by the changes suggested here:
#1025 (comment)

Issue 1025 appears to be the exact same issue, from what I can tell.

We first tried changes in the attached MR to this ticket:
https://github.com/wojtekmaj/react-pdf/pull/1207/files

As stated in the comments, that only partially fixed the issue.
We then changed willReadFrequently: true to alpha: false as suggested, and the issue is no longer appearing on the affected device with Intel Iris Xe.
We're unsure why this alpha option is false by default for pdf.js, but true by default for react-pdf. It does however explain why apps using both were experiencing the issue.

The fix did cause a minor regression for all devices, though: The document flickers black when user zooms in or out. As this is very minor in comparison to the rendering issue, our internal team will likely move forward with our own fork of react-pdf with this fix.

[wojtekmaj]

I investigated this and looks like while willReadFrequently: true is not used anywhere in pdf.js, alpha: false is indeed used. So this is what I have decided to implement and release in v6.2.2.

[puppetmaster886]

Can we fix this issue also for v5?

[wojtekmaj]

@puppetmaster886 I'm nowhere near having enough capacity to support v6 the way I would want to, let alone v5.

[mleister97]

@wojtekmaj Issue is still happening to me

[wojtekmaj]

@mleister97 I don't know if @react-pdf/renderer got updated with latest fixes. This is not a reliable source to test React PDF bugs.

[mleister97]

@mleister97 I don't know if @react-pdf/renderer got updated with latest fixes. This is not a reliable source to test React PDF bugs.

@wojtekmaj Sorry for bothering you. The issue is also happening using the latest react-pdf lib & pdf worker min js. But I figured something out, which may be helpful for you.

The problem only occurs when chrome switches to energy-saving mode (didn't know chrome had such a thing).
See: https://blog.google/products/chrome/new-chrome-features-to-save-battery-and-make-browsing-smoother/

Using chrome with my laptop below 20% battery the rendering issue happens with 50% of my local tested pdf files.