Transparent linear gradient rendered incorrectly

[bdlowery]

Bug report

Description / Observed Behavior

When using a linear gradient with transparent, it's not actually transparent, it's just black.

Expected Behavior

This css - backgroundImage: 'linear-gradient(transparent, transparent, white)', should render from transparent directly to white. Instead it renders from dark gray to white.

This is the expected behavior: https://codepen.io/bdlowery/pen/dyrrjgW

Reproduction

Reproduction link

[nateeo]

Ran into this as well — a workaround like 'linear-gradient(to bottom, #ffffff00, #ffffff00, white)' got me closer to what I wanted.

[natedunn]

Ran into this as well — a workaround like 'linear-gradient(to bottom, #ffffff00, #ffffff00, white)' got me closer to what I wanted.

It makes it better but it lightens it up more than ideal.

[gersomvg]

I thought this wasn't spec, but it is actually spec nowadays: transparent depends on the neighbouring colors in the gradient:

https://www.w3.org/TR/css-images-3/#example-77596609

[bdlowery]

You can even see in the tabs what the expected behavior should be.

HTML tab shows the expected behavior.

[natedunn]

Has anyone found a work around for this?

I find this is also not working for radial-gradient either.

[natedunn]

Update:

Seems like a tricky issue with how Satori is generating the SVG based on the CSS gradient provided. I'm no SVG expert to know what exactly is causing the issue (inaccurate transformation, rendering issue, or both). You can view the Satori SVG output though, which is helpful for debugging.

I worked around it by constructing my own (simpler) SVG manually and then passing that into Satori itself. 🤙