Search code examples
cssgradienttransparencybackground-colorlinear-gradients

CSS Linear Gradient Color Darkens on Mobile iOS compared to Major Desktop Browsers

I have discovered a strange problem about how transparency of linear-gradient background colors render on different platforms.

Two printscreens clarify the difference clearly. The first image is made on a popular desktop browser, the second image is on a popular mobile browser.

nav li{background:linear-gradient(to left, transparent, rgba(220 170 80 / 1))}
nav li{background:linear-gradient(to left, transparent, rgba(210 190 50 / 1))}
nav li{background:linear-gradient(to left, transparent, rgba(180 190 90 / 1))}

On Windows Chrome, Firefox, Opera, Vivaldi and Edge it shows nicely as it should:

enter image description here

However on Safari iOS on iPhone mobile and iPad tablet the gradient band looks different: it starts out well, and it ends also transparent, but everything in between looks dark, dull and colorless! :(

enter image description here

Question: What must be done sothat on mobile iOS the gradient behaves in exactly the same way, namly fades into transparency (no color defined, 100% transparency!) in the same as the other major browsers?

Solution

  • Don't use the transparent value in CSS gradients. iOS assumes that "transparent" means "black transparent," or rgba(0,0,0,0). Instead, switch it to a transparent version of the color you're using, e.g., rgba(220 170 80 / 0).