Wrong gradient behavior with opacity

Forum|Forum|2 years ago
March 20, 2024
12 replies
2516 views

Hello,

I’m might not the only one trough this, but gradients from 100% to 0% opacity are incorrect from a color to another. It doesn’t behave like a web browser and it can be confusing.
Here is an example roughly pasted from dev mode.

This topic has been closed for replies.

Show previous replies

JamesCurtis

New Member

@Damian_Oczki thx. It's very helpful to me.

However, during my usage, I also discovered a problem. If we add transparency to their parent nodes again at this time, it will once again cause the problem to occur (regardless of whether the developers use masks or not).

demo: https://stackblitz.com/edit/stackblitz-starters-nzhj5ffb?file=index.html

Sorry, due to the issue with the display mode, I will use the Chrome Color Picker to re-select the color values.

JamesCurtis

New Member

@JamesCurtis Hi guys~

I've figured out what's going on. Damn Apple! Just use an external display and change the color profile to sRGB (chrome://flags/#force-color-profile has no effect on me)

Chrome Transparency Bug

However, I noticed that after exporting the SVG from Figma, the rendering result in Chrome is indeed inconsistent with the one shown in Figma itself.

https://www.figma.com/design/osOlXAWKtHz2ArjdZHb8D3/wrong-behavior-with-opacity?node-id=0-1&t=TvvIKQcBC1tdC38W-1