Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When using Transparent Color and Background, Nothing Renders

See original GitHub issue

Expected Behavior

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

Current Behavior

Nothing renders except for transparency: image

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

yagudaevcommented, Apr 5, 2022

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

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:

  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]commented, Jul 12, 2022

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! 💪💯

Read more comments on GitHub >

github_iconTop Results From Across the Web

Final render isn't showing composite background color
I created a background color for my donut in compositing, and I can see it on the viewer that it looks great, but...
Read more >
transparent png not rendering as transparent? - Stack Overflow
Try this: Add background-color: transparent; and background-size: 46px 30px; to .search::before .
Read more >
Transparent clear color | Apple Developer Forums
Within the metal view (MTKView) i want to render a triangle, over clear (transparent) background. However, the background of the MTKView is always...
Read more >
When rendering a viewport with transparent background ...
When rendering a viewport with transparent background, anything with a modulated alpha turns goes to black instead of transparent.
Read more >
blender tips how to render a transparent background in ...
Download Free blender models: addons for ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found