Css 为什么在Chrome上无法正确渲染此渐变？

我使用CSS向

添加了一个简单的线性渐变。出于某种原因，它在Chrome上不起作用，但在Safari上效果很好

CSS规则如下所示：

background-color: #043a5f;
background-image: linear-gradient(180deg,#043a5f,rgba(30,113,212,0));
background-position: top;
background-repeat: no-repeat;
background-size: 100% 400px;

预期结果是在深蓝色背景上形成浅蓝色渐变。下图左侧是Safari（看起来不错），右侧是Chrome

这里有一把小提琴来证明：

---

注：我正在MacOS 10.15.7上运行Chrome 88.0.4324.96和Safari 14.0（15610.1.28.1.9、15610）。

实际上，这可能是Safari的错误

rgba（30、113、212、0）

与

rgba（12、34、56、0）

是相同的“颜色”（例如），因为只有一种“颜色”具有alpha值

0

：透明的

“颜色”

因此，Chrome（和Firefox）正试图在
043a5f
（背景色，实际上是不可见的）和
透明的
（实际上是不可见的）之间进行插值。因为
transparent
没有色调，所以整个渐变过程中唯一变化的变量是alpha通道值

可以在渐变中指定三个步骤以达到所需的效果：

背景图像：线性渐变（180度，透明，rgb（30 113 212），透明）；
看起来不同的浏览器可能会以不同的方式混合
背景颜色和
背景图像的渐变

你可以添加一些类似
背景混合模式：screen或可能
背景混合模式：叠加
尝试在两种浏览器中获得相似的行为
这很有意义。但是，我有意让它进行2次插值：从颜色A到B，从不透明（不透明度：1）到透明（不透明度：0）。这就是我在狩猎中得到的。但我知道这是开放的解释浏览器开发人员。顺便说一句，设计工具-如Figma-给了我和Safari一样的结果。我编辑了我的答案。太棒了！成功了。我只需要使用
rgba（30113212,0.5）
作为中间色，就可以得到我想要的。谢谢我只是按照你的建议尝试了其他模式。我看到了不同的结果，但并不完全是我想要的。与其说是真正的修复，不如说是一种变通方法