最新野生动物园中的线性渐变到透明错误？答案

【问题标题】：linear-gradient to transparent bug in latest safari?最新野生动物园中的线性渐变到透明错误？
【发布时间】：2016-11-18 09:20:39
【问题描述】：

我正在应用这样的基本线性渐变：

background-image:  linear-gradient(to top, red, rgba(0,0,0,0));

除了在 safari 中透明呈现为黑色/灰色之外，它的行为在任何地方都应该如此：

这里是 chrome（应该是这样的）：

这里是野生动物园

我尝试使用-webkit- 为其添加前缀，将rgba 更改为rgba(0,0,0,0.001)，但它永远不会变为纯透明。这是一个错误吗？有没有办法解决这个问题？

这是一个小提琴https://jsfiddle.net/2Lrp3sv1/2/

【问题讨论】：

设置 rgba(255,0,0,0) 不是更好吗？（适用于所有浏览器？）
@vals 在我的 CSS 中呈现红色。这很奇怪.. 虽然适用于 jsfiddle。我试过 rgba(255,255,255,0) 但它仍然从灰色变为白色:) 不完全透明
首先，决定你想要在中间点使用哪种纯色颜色。然后，我们可以计算出最终的颜色...

标签： css safari linear-gradients rgba

【解决方案1】：

没有浏览器将transparent 呈现为rgba(255, 255, 255, 0)，这是完全错误的。 transparent 始终为 rgba(0,0,0,0)，如 CSS Color 3 specification 中所定义。然而，几年前，我们改变了颜色插值在渐变中的工作方式并指定了it should happen in a premultiplied RGBA space，正是为了解决这个问题，并使transparent 的插值按预期工作。看起来其他浏览器已经实现了这个改变，但 Safari 还没有。如果您希望 Safari 的渐变看起来相同，则需要使用色标，该色标利用您要插入/从中插入的颜色的透明版本（如果这些颜色不同，有时可能需要在同一位置有两个色标），在这种情况下为linear-gradient(to top, red, rgba(255,0,0,0))。或者只是等待 Safari 赶上来！ :)

【讨论】：

也许“渲染”是错误的词。无论如何，当你提到检查规范时，会有人检查这个答案，他们的眼睛会交叉。有没有一种技术含量更低、更容易理解的方式来表达这一点？我会赞成。
我准备写 Safari 实际上做了正确的颜色插值，因为从 255,0,0 到 0,0,0 的线性过渡实际上是 red 到 black，但后来我阅读了规范以及关于 预乘 sRGBA 空间，现在它完全有意义，并且与规范的链接具有 EXAMPLE 23，它演示了非预乘空间中红色到透明的不正确过渡错误地计算为黑色！非常好的和内容丰富的答案，+1。

【解决方案2】：

这与浏览器呈现transparent 的方式有关。

对于大多数浏览器，

transparent === rgba(255,255,255,0)

但 Safari 将其呈现为

transparent === rgba(0,0,0,0)

因此，如果您有从 transparent 到 white（或 rgba(255,255,255,1)）的渐变，对于大多数浏览器，您只需将 alpha 从 0 更改为 1。

但对于 Safari，您将 alpha 从 0 更改为 1并且将颜色从 255 更改为 0，因此您会得到渐变的灰色。

这让我发疯了一段时间。

【讨论】：

你不知道。这是 Apple 的一项创新。
这是不正确的，我希望人们在继续错误信息之前检查规范或至少检查 MDN。没有浏览器将transparent 视为rgba(255, 255, 255, 0)，它始终是rgba(0,0,0,0)，这是不同浏览器插入的方式产生了OP 所询问的差异。有关更多详细信息，请查看我的答案。
嗯，我很高兴你对学习如此兴奋。我可以建议有更好的方式与我互动吗？我完全愿意接受这不是一个合理的技术答案，即使是不同的口语会更好，但这很好地描述了我当时所看到的，并导致理解解决方案。如果您愿意，我绝对可以提出一个不太正确的答案。
2021 年更新：请参阅 Lea Verou 的回答，以更清楚地了解实际情况

【解决方案3】：

根据@AJFarkas 所写，只需将transparent 替换为rgba(255, 255, 255, 0)，它就可以在 Safari 上正常运行！

在我的例子中，它是从白色到透明到白色的线性渐变：

background-image: linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #fff 90%);

【讨论】：

终于给出了一个真正提供解决方案的答案。
这就是变化，这太疯狂了。它虽然有效！

【解决方案4】：

因为我的情况看起来像是从

background-image: linear-gradient(rgba(243, 243, 251, 1), transparent);

到：

background: linear-gradient(rgba(243, 243, 251, 1), rgba(255, 255, 255, 0));

在 safari 上完美运行。

【讨论】：

【解决方案5】：

我也在 Safari 中看到了这一点。对我来说，它正在褪色为浅红色，尽管我使用的颜色都没有接近红色。

我使用“透明”作为值解决了它。一旦我停止使用 rgba，它看起来就像预期的那样。

【讨论】：

一旦我停止使用透明并使用 rgba，它看起来就像预期的那样。这里发生了什么：D
也许你有不同的期望！

【解决方案6】：

我遇到了渐变中的颜色由 CMS 动态应用的情况，因此这里有一个 Safari 中针对此问题的 Javascript 修复程序，它考虑到了这一点。

假设你使用伪类来实现，你可以使用js返回元素，新建一个样式标签，插入到文档头部。

<script>
    var col = document.querySelector('.my_div').style.color;
    var style = document.createElement('style');

    // Replace RGB with RGBA (we need the opacity)
    col = col.replace(/rgb/i, "rgba");
    col = col.replace(/\)/i,', 0)');

    //Create our new styles based on the returned colours
    style.innerHTML =
      '.my_div::before {' 
    + 'background-image: linear-gradient(to left, currentColor 0%, '
    + col 
    + ' 15%);'
    +'}';

    var ref = document.querySelector('script');
    // Insert our new styles before the first script tag
    ref.parentNode.insertBefore(style, ref);
</script>

Here's the source of this great trick

【讨论】：