chrome 和 safari 中的不同渐变颜色

Question

我正在尝试渲染渐变，它在 safari 和 chrome 上的颜色不同。如何使其相同？ （左 - 铬，右 - Safari）。

https://codepen.io/max-frai/pen/XWMEQZJ

<div id="test"></div>
#test {
  width: 400px;
  height: 300px;
  background: -webkit-linear-gradient(top,  rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
  background: linear-gradient(to bottom,  rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
}

Answer 1

您可以找到对here 发生的事情的一个很好的解释。基本上，这已经在工作草案中多年了，而 Safari 是唯一没有修复它的主要玩家。查看当前状态here：

在 Safari 和旧 Firefox 版本中的部分支持是指不支持 使用预乘颜色会导致意外行为 按照规范的建议使用 transparent 关键字。

我想如果你很绝望，你可以自己计算梯度并设置很多停止点。否则就等苹果修复吧。