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

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