transparent linear gradient looking strange in safari - html

Question

I have this dotted pattern, where I would like to fade the bottom out. I use a pseudoelement with a linear gradient from transparent to the color of the background.
In firefox it looks good, but in safari (14.1.1) it for some reason looks strange like this
Anyone know how to fix this?
:root {
--main-color:#05e2ff
}
body {
background-color: var(--main-color);
}
.line {
position:relative;
margin:0 auto;
height:50vh;
width:20px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2300B4D0'/%3E%3C/svg%3E%0A");
}
.line::after {
content:'';
display:block;
position:absolute;
width:100%;
height:50%;
bottom:0;
left:0;
background:linear-gradient(to bottom, transparent, var(--main-color));
}
<div class="line">
</div>

Answer 1

The transparent color keyword is a shortcut for rgba(0,0,0,0). That means Safari is creating a gradient from transparent black to --main-color. As the alpha channel transitions from 0–1, it gets gray, then as the RGB values transition to their values from --main-color, it becomes the correct color.
An alternate approach is to use the mask property on the .line element and get rid of the pseudoelement. (Note that Safari needs -webkit-mask, so I’m defining the mask in a custom property and applying to both mask and -webkit-mask for compatibility.)
:root {
--main-color:#05e2ff
}
body {
background-color: var(--main-color);
}
.line {
position:relative;
margin:0 auto;
height:50vh;
width:20px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2300B4D0'/%3E%3C/svg%3E%0A");
--mask: linear-gradient(to bottom, black 50%, transparent);
mask: var(--mask);
-webkit-mask: var(--mask);
}
<div class="line">
</div>