Dom-to-image: when using -webkit-background-clip: text with background image image background not rendered

[eljuani]

Use case: description, code

I have a div with this style:
-webkit-text-fill-color: transparent;
background: #edbc8e;
background-image: url(fondo.jpg);
-webkit-background-clip: text;

Expected behavior

It should render the masked text background on the canvas

Actual behavior (stack traces, console logs etc)

But it doesn't. If I use a gradient like
background: linear-gradient(to bottom, #3c332b 0%,#2f2820 49%,#352f27 100%);
it works, but not with an image.

Browsers

• [ ] Chrome 49+

[joni7777]

if im using on a div:
background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor);

its not rendering it, you maybe know why?

[GavinRF]

I am having this problem, but only in Chrome.

Fiddle https://jsfiddle.net/2m8dcr63/405/

[GavinRF]

Left = screenshot / Right = output of dom-to-image on Chrome Version 68.0.3440.106

.clipText { color: transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; background-size: cover; background-image: url(../img/forest.jpg) ; }

[fxwio]

I have the same problem.

Chrome Version 71.0.3578.98

[andyngdz]

I got the same problem.

[stripedypaper]

Same problem

[lorryrio]

Same problem

[chillyond]

+1

[birch-jayton]

+1

[Thul999]

+1

[NurulAlomAdor]

any sollution ? i need to solve this problem for my current project

[Quang-Khoa]

+1

[StephenWong1991]

+1

[pdji1602003]

Hello, is there anyone who has found a solution to this issue?
I suspect it's got something to do with the vendor prefix since the domtoimage.toPng works perfectly on Firefox, but not on Chrome.
Would be highly appreciated if someone knows how to fix this issue. Thank you in advance!