i’ve been having lots of trouble with PDF js, especially on Safari. I’ve tried to switch to use the legacy version, but now on my test site, it just displays a blank canvas. But locally it works fine?

Here’s my code relating to the PDF

import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.min.mjs';

class SitePlanPDF {
    constructor(mapContainerSelector, zoomInSelector, zoomOutSelector) {
        this.mapImageContainer = document.querySelector(mapContainerSelector);
        this.canvas = document.querySelector('#o-site-plan__map--canvas');
        this.context = this.canvas.getContext('2d');
        this.zoomInButton = document.querySelector(zoomInSelector);
        this.zoomOutButton = document.querySelector(zoomOutSelector);
        this.scale = 1;
        this.translation = { x: 0, y: 0 };
        this.currentPage = null;
        this.renderTask = null;
        this.isPanning = false;
        this.startPan = { x: 0, y: 0 };
        this.loadingIndicator = document.querySelector('.o-site-plan__map--loading');

        this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
        this.devicePixelRatio = this.isSafari ? (window.devicePixelRatio || 1) : 1;

        this.attachZoomHandlers();
        this.initPDFViewer();

        this.setupPanning();
    }

initPDFViewer() {
        pdfjsLib.GlobalWorkerOptions.workerSrc = "/static/build/pdf/pdf.worker.min.mjs";
        
        const checkPdfjsLibLoaded = () => {
            if (typeof pdfjsLib !== 'undefined') {
                this.loadPdf(); 
            } else {
                setTimeout(checkPdfjsLibLoaded, 100);
            }
        };

        this.loadPdf = () => {
            const pdfLink = this.mapImageContainer.querySelector('.o-site-plan__map').getAttribute('data-pdf-link');

            pdfjsLib.getDocument(pdfLink).promise.then(pdfDoc => {
                pdfDoc.getPage(1).then(page => {
                    this.currentPage = page;
                    this.resizeCanvas();
                    this.renderPage(true);
                    this.loadingIndicator.style.display = 'none';
                });
            }).catch(error => {
                console.error('Error during PDF initialization:', error);
                this.loadingIndicator.style.display = 'none';
            });

        };

        try {
            checkPdfjsLibLoaded();
        } catch (error) {
            console.error('Error loading PDF.js library:', error);
        }
    }

    renderPage(initial = false) {
        if (!this.currentPage) {
            console.warn("No current page to render");
            return;
        }
        if (this.renderTask) {
            this.renderTask.cancel();
            console.log("Previous render task canceled");
        }
    
        this.loadingIndicator.style.display = 'block';
    
        const viewport = this.currentPage.getViewport({ scale: this.scale * this.devicePixelRatio });
        this.canvas.width = viewport.width;
        this.canvas.height = viewport.height;
    
        if (this.isSafari) {
            this.canvas.style.width = `${viewport.width / this.devicePixelRatio}px`;
            this.canvas.style.height = `${viewport.height / this.devicePixelRatio}px`;
        }
    
        if (initial) {
            this.translation = { x: 0, y: 0 };
            if (this.isSafari) this.scale = 0.5;
        }
    
        this.updateTransform();
    
        const renderContext = {
            canvasContext: this.context,
            viewport: viewport,
        };
    
        this.renderTask = this.currentPage.render(renderContext);
        this.renderTask.promise.then(() => {
            this.renderTask = null;
            this.loadingIndicator.style.display = 'none';
        }).catch(err => {
            if (err.name !== 'RenderingCancelledException') {
                console.error('Error during rendering:', err);
            }
            this.loadingIndicator.style.display = 'none';
        });
    }
}

Should I switch back to using the normal version? Or is it possible I can get the legacy version to work with no greyscale for Safari? I’m lost!

The PDFs are hosted on the same server through the CMS btw

Any help would be greatly appreciated,
thanks

I’ve tried to use the legacy version to get colours working on Safari.