Backgrounds not displayed on Safari in SVG render mode

[pakindessama]

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 pdf.

I tried canvas and svg as renderMode. Below are the issues I got with each of them.

Canvas On Ipad, i have a particular PDF for which some pages are not rendered

Switching from canvas to svg solves this issue but provokes other another issue

SVG The background of some pages are missing on Safari

Switching from svg to canvas solves the issue.

Steps to reproduce

Below is the code I am using; You may need to change the render mode if you want to test the first case

import React, {useState, useEffect} from 'react';
import { pdfjs, Document, Page }
     // from 'react-pdf/dist/esm/entry.webpack'; // faster but need newer browser
    from 'react-pdf/dist/umd/entry.webpack'; // slower but support older browser
import pdfjsWorker from 'react-pdf/dist/umd/pdf.worker.entry';
import * as UI from "../../libs/libUI";
import CpBtnGoTop from "./CpBtnGoTop";
// import { Virtuoso } from 'react-virtuoso'

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

//'pdf.worker.min.js'; //'pdf.worker.js';

//Scale page:
//https://github.com/wojtekmaj/react-pdf/issues/74

//Empty pages:
// https://github.com/wojtekmaj/react-pdf/issues/864
const CpPDF = props => {
    const [loading, setLoading] = useState(0);
    const [ttlP, setTtlP] = useState(0); //total page of pdf
    const [draw, setDraw] = useState(0); //total page of pdf
    const [w, setW] = useState(0); //screen Width

    const pdf = (props?.data?.pdf)||'/test_pdf.pdf';
    // const pdf = '/test_pdfjs111.pdf';

    useEffect(() => {
        const onResize = () => { setW(UI.getScreenWidth()); };
        window.addEventListener('resize', onResize); //add listen on create
        onResize(); //for init;
        return () => { window.addEventListener('resize', onResize); }; //dont leak, remove on cleanup
    },[]);

    const onPdfLoad = l => {
        setTtlP(l.numPages);
        setDraw(l.numPages);
        // setLoaded(1);
    };

    const pageW = Math.max(320, w * 0.7);   //SVG
    // const pageW = Math.max(320, w - 82); // Canvas

    const pages = [];

    for(let i = 1; i <= Math.max(0, draw); i++){
        pages.push(<Page key={'pdfP'+i+'_w'+pageW} width={pageW} pageNumber={i} />);
        pages.push(<div key={"Gap"+i} style={{padding:'8px'}}></div>);
    }

    const handleRightClick = (e) => {
        e.preventDefault();
    }
    return <>
        <center>
                <div>
                    <CpBtnGoTop />
                    <div onContextMenu={handleRightClick}>
                        { loading ?
                            <div className='pdf_loading'>{UI.Loader('64px')}</div>
                            : <div style={{padding:'8px'}}>
                            </div>
                        }
                        <div style={{width:'100%'}} id={'pdfBlock'}>
                            <Document file={pdf} onLoadSuccess={onPdfLoad} renderMode={'svg'}>
                                {pages}
                            </Document>
                        </div>
                    </div>
                </div>
        </center>
    </>
};

export default CpPDF;

Expected behavior

Render a full PDF containing gradient background

Actual behavior

1. canvas: Some pages are not displayed
2. SVG: gradient background not displayed

Additional information

1. Canvas

2. SVG

PDF used for the second case

test.pdf

Environment

- **Browser**: Safari 15+
- **React-PDF version**: 5.5.0
- **React version**: 16.14.0

[wojtekmaj]

It doesn't work even in the latest PDF.js, so this is supposed to be raised to Mozilla instead.

[wojtekmaj]

Raised here: https://github.com/mozilla/pdf.js/issues/14300

[pakindessama]

Raised here: mozilla/pdf.js#14300

Thanks