Gray gradients on Safari
On Safari browsers gradients that includes transparent color might seem to be more gray(ish) than on other devices:
Typical look:
IOS mobile:
The mid part seems to be gray instead of light red.
So you have styles as follows:
.a {
background-image: linear-gradient(#f00, transparent);
}
.b {
background-image: linear-gradient(#f00, rgba(0,0,0,0));
}
.c {
background-image: linear-gradient(#f00, #00F0);
}
.d {
background-image: linear-gradient(#f00, #f000);
}
Which result on desktop is:
But on IOS mobile devices:
As you might have already noticed, IOS cuts out the alpha part from color and use it like a mid-gradient part.
In case A and B it would be #000 (black)
In case C it would be #00F (blue)
In case D it would be #F00 (red) which is a result we expected from the beginning.
Codepen if you want to test it on your own: Link
Tweet