-webkit-background-clip: text error about dom-to-image-more HOT 11 OPEN

I am having a similar issue.
My CSS:

  .high-gloss-schwarz-3mm,
  .high-gloss-schwarz-6mm {
    background: linear-gradient(
      180deg,
      rgba(50, 50, 50, 0.95) 24%,
      rgba(186, 186, 186, 1) 45%,
      rgba(226, 235, 238, 0.9514006286108193) 49%,
      rgba(50, 50, 50, 0.93) 50%,
      rgba(50, 50, 50, 0.97) 100%
    );
    color: transparent;
    background-clip: text;
    text-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

This is the result in Firefox (webkit-background-clip is not needed here).
[]

And this is the result of Chrome Mobile (webkit-background-clip is MANDATORY here):
[]

from dom-to-image-more.

from dom-to-image-more.

using chrome
this the code

what i should get is this

and this what am getting

from dom-to-image-more.

Same issue. I'm trying to add Linear/Radial gradients to text using webkit-background-clip: text, but receive background gradient only in Google Chrome and in SVG image

from dom-to-image-more.

Has anyone found a workaround?

from dom-to-image-more.

Seems like a bug in the Chrome getComputedStyle, even the browser's own inspector doesn't see it , notice that the specified style column shows the setting of -webkit-background-clip: text but the computed column doesn't. Might need to report a bug to Chromium

from dom-to-image-more.

December 2022 and I still see the same issue with -webkit-background-clip: text. Firefox works but Chrome doesn't work

from dom-to-image-more.

Seems to be working, closing.

from dom-to-image-more.

Hi @IDisposable It doesn't work on chrome

<span style="
      font-size: 72px;
      background: -webkit-linear-gradient(#eee, #333);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px red;
    ">  
      Test HTML
    </span>

On Chrome:

On Safari or Firefox it works

from dom-to-image-more.

I tried this solution and it seems work for me:

const _serializeToString = XMLSerializer.prototype.serializeToString;
XMLSerializer.prototype.serializeToString = function (node) {
  return _serializeToString
    .call(this, node)
    .replace(
      /background-image:/g,
      '-webkit-background-clip: text; background-image:',  // Add the -webkit-background-clip
    );
};

from dom-to-image-more.

I will get this fix included in the 3.x branch

from dom-to-image-more.