are CSS properties like -webkit-mask-image currently working?

[t-var-s]

From looking through issues and PRs, I'm not sure of any current CSS limitations as of version 1.10.8 Maybe that's something that can be added to the README.md?

Specifically, I think that the -webkit-mask-image property renders a completely transparent image. For example: renders as empty PNG square. The HTML is something like: <div style="background: linear-gradient(90deg, rgb(131, 58, 180) 25%, rgb(253, 29, 29) 50%, rgb(252, 176, 69) 80%); -webkit-mask-image: url(alert.svg); width: 600px; height: 600px"></div>

I believe there are similar issues regarding background-clip but I'm not sure if they're related.

[vivcat[bot]]

👋 @t-var-s

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.

[playest]

I implemented that in my fork, you can look at the changed here: https://github.com/playest/html-to-image

I plan to create a PR it when I have the time...

[t-var-s]

I implemented that in my fork, you can look at the changed here: https://github.com/playest/html-to-image

I tried it just now and it seems to have the same behaviour, an empty transparent square.

[playest]

It does manage the mask property yes. Have you tried without the --webkit prefix?

[t-var-s]

It does manage the mask property yes. Have you tried without the --webkit prefix?

I have to use -webkit-mask-image with chromium browsers, but I have tested mask-image in Safari and the behaviour is the same. I have confirmed that maskImage is in the getComputedStyle of the element.

[erikswedberg]

I implemented that in my fork, you can look at the changed here: https://github.com/playest/html-to-image

I plan to create a PR it when I have the time...

I checked out your fork but I was unable to get it to build. It says /dist/html-to-image.js is 741 bytes gzipped when it should be 18kb. What am i doing wrong? How do I get your version of html-to-image.js to test --mask-image? Also is it possible to add in --webkit-mask-image?

[qq15725]

@erikswedberg

https://stackblitz.com/edit/web-platform-cp4wyu?file=index.html

Try this branch that supports -webkit-mask-image

[amiratak88]

I opened PR #382 to add support for -webkit-mask and webkit-mask-image.

[callmejumeh]

I opened PR #382 to add support for -webkit-mask and webkit-mask-image.

Awesome! Has it been implemented yet?