Saving html as image on mobile safari causes shadow bug

[wordanjood]

I'm using toPng to get base64 to be placed on database. At the moment it works perfectly on chrome but when saving an image on Safari a shadow appears. Has anyone experienced this?

export const downloadImageBase64 = async (): Promise<String | null> => {
  const pitchElement = document.getElementById("pitch-container");
  if (pitchElement) {
    pitchElement.style.transform = "scale(1)";
    const base64 = await toPng(pitchElement, { cacheBust: true }).then(
      (base64) => base64
    );
    pitchElement.style.removeProperty("transform");

    return base64;
  }
  return null;
};

Expected Behavior

A base64 should be created with an image of exactly what is seen on screen for the element.

Which it currently does for chrome:

Current Behavior

Unwanted shadow appears

Safari:

To reproduce

Create a team at www.lineup-builder.co.uk on safari mobile and click save & share button

Your Environment

Safari mobile browser. Doesn't happen on Safari web

"html-to-image": "^1.10.8",

[vivcat[bot]]

👋 @wordanjood

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.

[incuedAA]

I'm experiencing this issue as well

[marctaule]

Me too. I’m also experiencing this in safari in desktop.