When using Transparent Color and Background, Nothing Renders

Expected Behavior

The image should render as it appears on the screen, such as:

Current Behavior

Nothing renders except for transparency:

Steps To Reproduce

1. Create a div and apply these css rules to it:

#logo {
    color: transparent;
    background: linear-gradient(#3294cd, #a85c34);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: italic;
    font-weight: bold;
    font-family: Aladin;
    filter:  brightness(100%) contrast(140%) saturate(140%);
}

1. Attempt to generate an image.

Additional Context

I’m running this in an Angular project via npm install. I’ve successfully used this in other projects, but this is the first project where the text color is transparent and the background only is what is actually being displayed. I am running this on Chrome, Windows 11.

[yagudaev]

After a lot more digging around, it is a chrome bug in how it sets vendor prefixes programmatically.

https://github.com/facebook/react/issues/14200

Basically, Chrome assumes it supports background-clip and just removes the vendor prefix. Seems like it has been the case since at least 2018.

Worse, it sometimes would decide to use a shorthand CSS property background instead of background-clip, background-image, etc. This will make the shorthand property invalid which is why you are seeing a transparent background @BrandonQDixon.

There are 3 possible solutions:

1. Pull text out of SVG foreignObject and into a <text> and <linear-gradient> attributes (note that Figma doesn’t support gradient fills in SVG text elements, so instead of using <mask /> and <rect /> will do it, got the idea from: https://github.com/felixfbecker/dom-to-svg).

2. Replace text HTML gradient nodes with SVGs as in no.1, and let the library still do the same thing with foreignObject. This avoids relying on Chrome’s CSS rendering in favour of SVG rendering.

3. Inline-styles in XML string and use XML (not HTML) to construct foreignObject string.

Overall, thank you @bubkoo for a great library. The reliance on SVG foreign object for all image functions is brilliant and once chrome fixes this bug and as it evolves this lib will continue to generate accurate browser based snapshots 😁.

[vivcat[bot]]

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯