Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

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

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

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

joshemblingcommented, Sep 12, 2022

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.

keyvnchristiancommented, Dec 16, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Force React to reload an image file? - Stack Overflow
Can I use this to re-render the image? I tried this.forceUpdate() but it doesn't work. reactjs.
Read more >
React Fallback for Broken Images Strategy | by Dani Shulman
Let's get back to broken images. The most basic approach would be to use the onError event and replace an image that failed...
Read more >
How to handle loading of images that may not exist?
So the first thing that you can do to counter the broken image problem is to periodically check all images for sanity.
Read more >
You're Doing Image Rendering WRONG in Next.js! - YouTube
Want coding problems (with solutions!) delivered to your inbox daily!?Sign Up Here: Join the ...
Read more >
7 Reasons Why Images Are Not Loading on Your Website
Upload those images, refresh your web page, and it should immediately display the files as expected. You can also try to delete the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found