Blank Image in Safari

[himanshupatil363]

We are basically trying to take screenshots of a div which has images as it's child the output we are getting has blank spaces instead of images this works fine on chrome but safari has this issue

[vivcat[bot]]

👋 @himanshupatil363

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[JokeShaco]

I also encountered this problem

[frong123nk]

It seems to be a Safari bug that doesn't load the canvas immediately when the web page is rendered. I tried to fork the code and fix it by setting a timeout when loading an image in util.ts within the createImage function. from img.onload = () => resolve(img) to

 img.onload = () => {
      setTimeout(function () {
        resolve(img);
      }, 300);
    };

[jagabs]

img.onload = () => { setTimeout(function () { resolve(img); }, 300); };

this works in mac safari but doesnt work in ios safari tho after 2-3 times the img does show

[frong123nk]

img.onload = () => { setTimeout(function () { resolve(img); }, 300); };

this works in mac safari but doesnt work in ios safari tho after 2-3 times the img does show

Another way you can try is to loop the toCanvas function, but it's not the best practice because you don't know how many times to show the image.

export async function convertHtmlToCanvas(
  targetElement: HTMLElement,
  countReRender: number = 0,
): Promise<HTMLCanvasElement> {
  let canvas: any;
    for (let i = 0; i < countReRender; i++) {
      canvas = await toCanvas(targetElement);
    }
  return canvas;
}

[Rabithua]

In the same situation, the problems encountered in Safari are a headache，

[Sebas3245]

¿Has anyone found a better solution than the loop solution?