First render of image (on mobile) is broken, on refresh rendered image is correct

There is an issue I have surfaced on mobile devices - particularly using Safari where the first render of the image is completely broken, formatting issues, font issues etc.

On refresh these are resolved and the image is correct.

Here is my code:

htmlToImage
        .toJpeg(node, {
            backgroundColor: "#621934",
            width: "700",
        })
        .then(function (dataUrl) {
            var img = new Image();
            img.src = dataUrl;
            img.className = "rendered-img";
            final.appendChild(img);

            downloadImage.addEventListener("click", () => {
                var link = document.createElement("a");
                link.download = "img.jpeg";
                link.href = dataUrl;
                link.click();
            });
        })
        .catch(function (error) {
            console.error("oops, something went wrong!", error);
        });

[joshembling]

Hey @joshembling – I’ve recently been experiencing the exact same issue. I thought it might be because I wasn’t setting certain CSS properties on my child elements (width, height, position, etc.), but I’ve experimented a ton with those with no luck. Very strange that it’s on mobile only (cannot reproduce simulating mobile screen size on my desktop either). Were you able to find any fixes or workarounds?

No I haven’t found a fix, unfortunately. There doesn’t seem to be much support for this package anymore either so I can’t see it being fixed anytime soon.

[keyvnchristian]

So i was able to solve this using html2canvas this one

here’s what I’m doing

let node = document.getElementById(`someid`);
html2canvas(node, {
    useCORS: true, //useCORS if there's one or more images using external URL
}).then(function (canvas) {
    const dataURL = canvas.toDataURL();
    download(dataURL, 'image.png'); // download here using downloadJs
})

Hope this helps