iPhone Safari can't render pdf: Total canvas memory use exceeds the maximum limit (384 MB).

[jiyuan12354]

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 PDF.js demo

Description

I am using react-pdf to render my pdf, it works well on PC browser such as Chrome, Safari, Edge... But somehow when I load the pdf in my iPhone safiri, it throw warning Total canvas memory use exceeds the maximum limit (384 MB). and get canvasContext() { return canvas.getContext('2d'); =====> this return null, will cause null reference error later } Throw error: TypeError: null is not an object(evaluating 'params.canvasContext.canvas') /static/js/bundle.js

Steps to reproduce

using iphone safari, load the url such as my test url https://pruforceagentcoedev.prudential.com.hk/cdn/%24web/material_sales/64f151645d6aa7a3e2d752ef.pdf

it may succeed to load the url in the first render, but once you refresh the page one more time, it will throw error

Expected behavior

I am expecting a normal pdf rendering

Actual behavior

pdf rendering crashed

Additional information

No response

Environment

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

[jiyuan12354]

attach an error stack ss

[jiyuan12354]

refer to https://github.com/wojtekmaj/react-pdf/issues/1020 I add react-window library to my project

import React, { useState } from 'react';
import { FixedSizeList as List } from 'react-window';
import { Document, Page, pdfjs } from 'react-pdf';

const PdfViewer = ({ file, width = window.innerWidth }) => {
  const [numPages, setNumPages] = useState(null);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  const rowRenderer = ({ index, style }) => {
    return (
      <div style={style}>
        <Page key={+index} renderTextLayer={false} renderAnnotationLayer={false} pageNumber={index + 1} width={width} />
      </div>
    );
  };

  return (
    <Document
      options={{
        cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
        cMapPacked: true,
        standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`,
      }}
      file={file}
      onLoadSuccess={onDocumentLoadSuccess}
    >
      {numPages && (
        <List
          height={window.innerHeight}
          itemCount={numPages}
          itemSize={window.innerWidth * Math.sqrt(2)}
          width={width}
        >
          {rowRenderer}
        </List>
      )}
    </Document>
  );
};

export default PdfViewer;

the frequency of throw this error is lower, but it still not disappeared

[jiyuan12354]

Seems I update react-pdf to latest version(5.7.2 -> latest^7.3.3), things go well now react-window@latest + react-pdf@latest

[yimingbot]

I found this error can be reproduced when scrolling quickly in ios webview. And upgrading to v7.7.1 did not solve the problem.