On mobile devices, images move to the right bottom

[Oussama-El-Benney]

when downloading the image using desktop it works fine, but when i try on mobile devices or using the desktop responsive, downloading images started a strange behavior, as images on the downloaded canvas moves to the right bottom. this is my code:

const captureScreenshotPlayerRecordVsTeam = async () => {
        try {
            if (divRefPlayerForm.current) {

                // Increase scale for higher quality
                const scale = 1;

                // Set DPI for higher quality
                const dpi = 300;

                const canvas = await html2canvas(divRefPlayerForm.current, {
                    scale: scale,
                    useCORS: true, // Enable CORS for capturing external images
                });

                // Convert canvas to a data URL
                const dataUrl = canvas.toDataURL('image/png', 1.0); // Use PNG format with high quality

                // You can now save or display the screenshot as needed
                console.log(dataUrl);

                // Create an anchor element for downloading
                const downloadLink = document.createElement('a');
                downloadLink.href = dataUrl;
                downloadLink.download = `${selectedElement?.web_name} form ${ (home && !away) ? " Home " : (away && !home) ? " Away " : '' } GW${startGw}-${endGw}.png`; // Specify the filename

                // Trigger the download programmatically
                downloadLink.click();

            }
        } catch (error) {
            console.error('Error capturing screenshot:', error);
        } finally {
        }
    };

I searched and found this solution but its not working.

// Adjust viewport for mobile devices
                if (screen.width < 1024) {
                    document.getElementById("viewport")?.setAttribute("content", "width=1200px");
                }

[SwayamFlipr]

I am facing a similar issue but the in my case image gets shifted to top left and also get cropped automatically, basically mobile device is unable to capture the whole image in the canvas

[MarcusPOliveira]

Same here. On Android works fine. But in iOS (17.3.1 here) occurs the bug.