toPng and toJpeg skip background-image on firefox on the first download

[LSDCF]

Expected Behavior

On google :

Current Behavior

On firefox :

Possible Solution

I use this background-image to make a custom border dotted for my elements but I have the impression that this is not well supported on Firefox so I use a normal border to make it works while the border is not dotted

Steps To Reproduce

I use this background-image for my element :
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000' stroke-width='6' stroke-dasharray='15%2c 20' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");

You can try it localy with stackblitz : https://stackblitz.com/edit/html-to-image-shadow-3goghm?file=src%2Fapp%2Fapp.component.ts

but it is really strange because it don't work the first time i download the image but it's working the second time

Additional Context

i took this background-image from this generator : https://kovart.github.io/dashed-border-generator/

Your Environment

my environnement :

Angular CLI: 15.2.9
Node: 16.13.1
Package Manager: npm 9.2.0
OS: linux x64

Angular: 15.2.9
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1502.9
@angular-devkit/build-angular 15.2.9
@angular-devkit/core 15.2.9
@angular-devkit/schematics 15.2.9
@schematics/angular 15.2.9
rxjs 7.8.1
typescript 4.8.4

• html-to-image: [1.11.11]
• OS: [EndeavourOS 6.5.2-arch1-1]
• Browser: [chrome 97.0.4692.99] && [firefox 117.0]

[biiibooo]

👋 @LSDCF

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.

[vipuljbhikadiya]

@LSDCF , Hi have you get any solutions to this issue?, i also facing same issue with react js

[mocdaniel]

Same problem here, also on Safari. I'd happily provide more information to track this down, just lmk what you need to know.

[tmulry]

This problem goes away for me if I add the eager prop to the v-img component

[erikhric]

For anyone still having this issue on safari. I solved it by calling in my case toBlob multiple times before using its result. Do it in loop or just copy paste multiple calls...
await toBlob(params)
await toBlob(params)
await toBlob(params)
const blob = await toBlob(params)