Poor Safari scroll performance in canvas; no render during scroll in svg

[jackwshepherd]

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
• [x] If I have a problem with PDF rendering, I checked if my PDF renders properly in Mozilla Firefox

Description

I have implemented react-pdf using a simple react-window implementation. I've put my code below. I've been playing around between renderMode in canvas or svg.

• When set to canvas, the PDF renders very smoothly in Chrome, Edge and Firefox. No issues even in rapid scrolling on long image-baesd documents. However, in Safari, performance is completely terrible to the point of unusable. I have had to detect Safari as the browser and use the isScrolling prop to hide the element on scroll.

• When set to canvas, performance is smooth in all browsers. However, after the first few pages on an image-based PDF, the PDF pages flash to white shortly after scrolling, and also remain white during scrolling.

Steps to reproduce

Steps to reproduce the behavior:

1. Use from react-window and display a element within the function component
2. Set renderMode to canvas - performance is slow in Safar
3. Set renderMode to svg - performance is better, but not during scrolling

Expected behavior

Smooth scrolling. I get bumpy scrolling whenever rendering in SVG mode. In Canvas, Safari is laggy to the point of unusable.

Additional information

If applicable, add screenshots (preferably with browser console open) and files you have an issue with to help explain your problem.

Environment

• Browser (if applicable) various
• React-PDF version [e.g. 3.0.4]: 4.1.0
• React version [e.g. 16.3.0]: 16.12.0
• Webpack version (if applicable) [e.g. 4.16.2]: 4.42.0

<Document
  className="viewer-document"
  file={url}
  loading={<Loading progress={progress} />}
  onLoadProgress={({ loaded, total }) => setProgress(loaded / total)}
  onLoadComplete={() => setProgress(1)}
  renderMode="svg"
>
  <List
    ref={list}
    itemData={{ details: pageScrollDetails, activePage }}
    className={`viewer-list scale-${scale}`}
    width={width}
    height={window.innerHeight}
    itemCount={entry.pageCount || 1}
    onScroll={(event) => {
      setScrollEvent(event);
    }}
    itemSize={(index) => pageScrollDetails[index].height}
  >
    {({ style, data, index }) => {
      <div className={`viewer-page-container`} style={{ ...style, height }}>
        <div className="viewer-page-gutter" style={{ width: pageWidth }}>
          <Page
            pageNumber={pageNo}
            error={"Failed "}
            loading={
              <PlaceholderPage
                style={style}
                pageNo={pageNo}
                width={pageWidth}
              />
            }
            scale={currentScale}
            renderAnnotationLayer={false}
          />
        </div>
      </div>;
    }}
  </List>
</Document>;

[wojtekmaj]

I wonder if that's connected in any way to #599 🤔

[squalvj]

i have similar issue on safari, the scroll is not consistent on safari loading the entire page

[TugboatTanner]

I too am experiencing this. I actually have performance issues on all browsers unless I disable the text layer. If not disabled the text layer forces multiple redraws causing the whole site to drag. But Safari seems to have issues regardless of the text layer being disabled or not.

[SandeepGamot]

Hey guys, I too find my self stuck around this issue, but in my case the pdf is loaded but it's just blank, as in the pdf loads properly but is not rendered. The width and height of the canvas are also not zero. Any ideas what could cause this?

[aj47]

I'm also experiencing slow render issues on large documents on safari on iPad

[amcipher]

You can use React Virtuso to render a list of Pages, it will resolve slow rendering issues. Tested on iPad too. https://www.npmjs.com/package/react-virtuoso

<Document
      className={classes.document}
      file={{url:fileUrl}}
      onLoadSuccess={onDocumentLoadSuccess}
      onLoadError = {(error) => alert('Error while loading document! ')}
  >
    <Virtuoso
      style={{ height: 500 }}
      totalCount={numberOfPages}
      itemContent={index => <Page 
          key={`page_${index + 1}`} 
          pageNumber={index + 1}
     />}
  />
</Document>

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.

[briannaneiderman]

Has this performance issue been fixed? If I have to install another library (like React Virtuso) to handle multi-page PDFs, I'll have to uninstall react-pdf and try something else.