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

我发现了一个奇怪的问题：线性渐变背景色的透明度如何在不同的平台上渲染

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

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 mobile和iPad平板电脑上的Safari iOS上，渐变带看起来不同：它开始时很好，结束时也是透明的，但中间的一切看起来都是黑暗、暗淡和无色的(

---

问题：

---

在移动iOS上，渐变的表现方式与其他主流浏览器完全相同，但会逐渐变为透明（没有定义颜色，100%透明！）。

不要在CSS渐变中使用

透明
值。iOS假定“透明”表示“黑色透明”，或
rgba（0,0,0,0）
。相反，将其切换到您正在使用的颜色的透明版本，例如，
rgba（220 170 80/0）
不要在CSS渐变中使用
transparent
值。iOS假定“transparent”表示“黑色透明”，或
rgba（0,0,0,0）
。相反，将其切换到所用颜色的透明版本，例如，
rgba（220 170 80/0）
这些浏览器在技术上是相同的Chrome、Opera、Vivaldi和Edge！@ManasKhandelwal他们是不同的浏览器。但是他们都是从相同的渲染引擎Chrome开始的。但是他们是分叉的。这回答了你的问题吗？这些浏览器在技术上是相同的Chrome、Opera、Vivaldi和Edge！@ManasKhandelwal他们是不同的浏览器呃。但是它们都是从同一个渲染引擎开始的；铬。但是它们是分叉的。这能回答你的问题吗？假设没有其他的“优雅”解决方案从2021年起，我接受这样一个事实，即它只能通过复制每种颜色来工作。Helas没有比克隆更优雅/替代的解决方案，所以我接受你的答案。希望iOS在未来的某个时候能赶上其他浏览器…感谢一致的答案！赏金是你的！假设我在那里没有其他的“优雅”解决方案从2021年起，我接受这样一个事实，即它只能通过复制每一种颜色来工作。Helas没有比克隆更优雅/替代的解决方案，所以我接受你的答案。希望iOS在未来的某个时候能赶上其他浏览器……谢谢你的一致答案！赏金是你的！