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]

[vivcat[bot]]

👋 @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