Distorted text

[Greg-Hitchon]

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 am getting a pdf that is rendered incorrectly and looks like:

The actual pdf looks normal.

It is not one of the overlays causing the issue (text or annotation) and when 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.

Steps to reproduce

Difficult to consistently reproduce.

Expected behavior

Display pdf clearly

Actual behavior

Pdf is distorted

Additional information

No response

Environment

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

[salahCoone]

I am also facing the same problem

[JaviCeRodriguez]

I have the same problem with external pdf docs (Google Chrome). I use this versions deps:

• react: 18.1.0
• react-dom: 18.1.0
• react-pdf: 5.7.2

This is my react component for use react-pdf:

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import { Box } from '@mui/material';
import './index.css';

const PDFViewer: React.FC<{ fileURL: string }> = ({ fileURL }) => {
  const [numPages, setNumPages] = useState(null);

  const onDocumentLoadSuccess = (args: any) => {
    setNumPages(args.numPages);
  };

  return (
    <Document
      className="document-pdf"
      file={fileURL}
      onLoadSuccess={onDocumentLoadSuccess}
    >
      {Array.from(new Array(numPages), (el, index) => (
        <Box key={`page_${index + 1}`} marginBottom="10px">
          <Page width={900} pageNumber={index + 1} />
        </Box>
      ))}
    </Document>
  );
};

export default PDFViewer;

[arfanliaqat]

We also faced the same issue in our app. However 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 pixlated preview. Unless we ask them to turn off this flag. Any resoluation is appreciated. 🙏

Related issues #1015 #1010

[michael-roberts-lwt]

Looks like they found at least a temporary solution over on react-pdf/renderer.
diegomura/react-pdf#1890 (comment)

One option is to use the renderMode="svg" on the Document but the resulting fonts are not correct.

This worked for me in react-pdf: 5.7.2, and my fonts all still look correct.

[mcgeld]

Looks like they found at least a temporary solution over on react-pdf/renderer. diegomura/react-pdf#1890 (comment)

One option is to use the renderMode="svg" on the Document but the resulting fonts are not correct.

This worked for me in react-pdf: 5.7.2, and my fonts all still look correct.

This did help the text render correctly in my case, but then any images embedded in the pdf don't render. The images just show up as the standard 'image not found' image.

[Greg-Hitchon]

Looks like they found at least a temporary solution over on react-pdf/renderer. diegomura/react-pdf#1890 (comment)

One option is to use the renderMode="svg" on the Document but the resulting fonts are not correct.

This worked for me in react-pdf: 5.7.2, and my fonts all still look correct.

This did help the text render correctly in my case, but then any images embedded in the pdf don't render. The images just show up as the standard 'image not found' image.

Yeah this is the same for me...pretty funny tbh, like playing whack-a-mole with these settings. Free though so can't complain, going to investigate some paid options I guess!

[wojtekmaj]

Can you still see this in v6? PDF.js got updated in v6 so chances are the issues you're experiencing have been resolved by now.

[Greg-Hitchon]

I will test when I get a chance! However I am not sure this will be resolved...see here...i think this is the same issue and the pdf.js folks seem to just be not supporting chrome...

[pvg8v6g]

Can you still see this in v6? PDF.js got updated in v6 so chances are the issues you're experiencing have been resolved by now.

I can confirm this is still an issue with v6.0.3

[1Jesper1]

Problem exists in Chrome and Edge, but problem doesn't exist when using Firefox.

[MattL75]

I’ve been testing this issue on our fork of react-pdf and I get some pretty good results, at least preliminarily. The issue was only occurring on certain integrated GPUs. Namely Intel Iris Xe, Intel UHD, Nvidia T1200.

The only change I made related to this is adding alpha: false as an option to the canvas context. canvas.getContext(‘2d’, {alpha: false});

@wojtekmaj From the early testing results, this seems to fix the distorted text. Important to note that the pdfjs viewer does not have this issue and they also have alpha: false. Is there any reason react-pdf does not have this option? Would you be open to a PR for this?

[1Jesper1]

mozilla/pdf.js#14641 (comment) Seems to be fixed by Chrome?

[wojtekmaj]

Duplicate of #1010