Safari 6 渐变色混合/插值错误答案

【问题标题】：Safari 6 Gradient color blending/interpolation bugSafari 6 渐变色混合/插值错误
【发布时间】：2012-12-14 07:35:43
【问题描述】：

图片应该说明一切。左边是 Safari 6，右边是 Chrome。不仅透明红色渐变的下半部分完全错误（这可能是过度预乘 alpha 的情况），上半部分也更暗，这看起来像是一个 gamma 校正问题。

此问题在 Mountain Lion 上的 Safari 6 和 iOS6 Mobile Safari 上出现，但在 Lion 上的 Safari 6 上却没有。

http://jsfiddle.net/ZUTYm/4

有没有人找到获得预期结果的解决方案？我需要我的渐变来涉及 alpha，因为我正在尝试淡入淡出文本。

由于在输入实际代码之前无法完成编辑，因此这里是渐变定义：background-image: -webkit-linear-gradient(top, red, rgba(255,128,128,0), white);

【问题讨论】：

我在 safari 6.0.2 中打开了 jsfiddle，在运行 mbp 的山狮上得到与图片中的 chrome 相同的结果
感谢您的评论@DanielKurz 我明天会检查机器上软件的确切版本。但是，iOS 6.0 上也存在这个问题，这很麻烦。
你真的认为这是 safari 的 bug 吗？因为下半部分应该是从背景颜色到白色的渐变，对吧？这就是 safari 显示的内容
我认为部分错误在于将rgba(x,x,x,0) 视为与rgba(0,0,0,0) 相同。他们是不一样的...！即使将中间色标设置为rgba(255,128,128,0.1) 也会产生错误的结果。颜色被 alpha 缩放，这是错误。
奇怪的是，我不时查看您的问题和 jsfiddle，有时 safari 会以 chrome 的方式显示它，有时会以识别的方式显示。

标签： css graphics safari webkit gradient

【解决方案1】：

我能够在 Mac 10.8.1 Safari 6.0 (8536.25) 和 iOS Safari 6.0.1 上重现该问题。我认为应用 -webkit-mask-image 而不是透明色标可以避免这个问题：

.grad-bg {
    background-image: 
        -webkit-linear-gradient(top, #ff0000, #fff);
    height: 100%;
}

.masked {
    -webkit-mask-image:
        -webkit-linear-gradient(top, white, transparent, white);
}

jsFiddle

在图像中，顶部显示在白色背景上，底部形状显示在相同颜色的不透明渐变背景上。

（许多编辑。）

【讨论】：

我认为为了保持一致性，您需要设置中间值rgba(0,0,0,0)。
我不关注； OP 有rgba(255,128,128,0) 并且相同的值在链接的jsFiddle 中。如果中间值全为 0，则渐变中的灰色会更多。
但这就是问题所在，Safari 将 rgba(255,128,128,0) 解释为 rgba(0,0,0,0)，为了使 Chrome 保持一致，您需要让它们都使用相同的值。
我添加了一个截图。我还是不关注你。如果 Safari 对 rgba(255,128,128,0) 的解释不正确，那么这个想法似乎是让 Safari 正确解释它。我想它可以是任何一种方式，您可以通过限制您使用的渐变（使 Chrome 适合 Safari）或通过向 CSS 文件添加冗余信息（解决 Safari 的错误）来解决 Safari 的错误。不过值得注意的是，Safari 6.0.2 以 Chrome 的方式呈现它。
有趣。您使用哪个版本生成屏幕截图？老实说，我认为将完全透明的颜色视为根本没有 RGB 值是不正确的，这只是解释它的一种不同方式——即使它与某些预期相反。显然，如果每个浏览器都做出相同的解释，但除非它在某处违反某些规范，否则它不会上升到错误级别。