Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
LSDCF opened this issue Sep 12, 2023 · 5 comments
Open
Labels

Comments

@LSDCF
Copy link

LSDCF commented Sep 12, 2023

Expected Behavior

On google :

exemple 1

Current Behavior

On firefox :

exemple 2

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]
@LSDCF LSDCF added the bug label Sep 12, 2023
@biiibooo
Copy link
Contributor

biiibooo bot commented Sep 12, 2023

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

@LSDCF LSDCF changed the title toPng and toJpeg skip background-image on firefox toPng and toJpeg skip background-image on firefox on the first download Sep 12, 2023
@vipuljbhikadiya
Copy link

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

@mocdaniel
Copy link

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

@tmulry
Copy link

tmulry commented Dec 21, 2023

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

@erikhric
Copy link

erikhric commented Oct 9, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants