CSS 与主要桌面浏览器相比，移动设备上的线性渐变颜色变暗 iOS

Question

我发现了一个奇怪的问题，即线性渐变背景颜色的透明度 在不同平台上的渲染方式。

两个打印屏幕清楚地阐明了差异。第一张图片是在流行的桌面浏览器上制作的，第二张图片是在流行的移动浏览器上制作的。

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))}

在 Windows Chrome、Firefox、Opera、Vivaldi 和 Edge 上它显示得很好：

但是在 iPhone 移动设备和 iPad 平板电脑上的 Safari iOS 上，渐变带看起来不同：开始时很好，结束时也是透明的，但中间的一切看起来都很暗，单调无色！ :(

问题: 必须做什么才能在移动设备上 iOS 渐变以完全相同的方式运行，与其他主要浏览器一样逐渐淡化为透明（未定义颜色，100% 透明！）？

Answer 1

不要在 CSS 渐变中使用 transparent 值。 iOS 假定“透明”是指“黑色透明”或rgba(0,0,0,0)。相反，将其切换为您正在使用的颜色的透明版本，例如 rgba(220 170 80 / 0).

CSS 与主要桌面浏览器相比，移动设备上的线性渐变颜色变暗 iOS

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

css

transparency

gradient

linear-gradients

background-color