PDFs not rendering perfectly after Chrome update

[fgouvea10]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] 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)