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

Question

图片应该能解释一切。左边是Safari 6，右边是Chrome。不仅完全错误的透明红色渐变的底部（可能是过度热衷于预乘alpha的情况），而且顶部也更暗，这看起来像是一个伽马校正问题。

这个问题在Mountain Lion上的Safari 6和iOS6移动版Safari上出现，但在Lion上的Safari 6上没有出现。

http://jsfiddle.net/ZUTYm/4

有人找到了获取预期结果的解决方案吗？我需要我的渐变涉及alpha，因为我想要将文本淡入和淡出事物中。

由于我不能完成我的编辑，直到我在这里放入真正的代码，这是渐变定义：background-image: -webkit-linear-gradient(top, red, rgba(255,128,128,0), white);

- Steven Lu

---

我在运行Mountain Lion的MBP上使用Safari 6.0.2打开了jsfiddle，得到了与您图片中Chrome浏览器相同的结果。 - Daniel Kurz

感谢您的评论@DanielKurz，我明天会检查机器上软件的确切版本。然而，问题也存在于iOS 6.0上，这令人困扰。 - Steven Lu

奇怪的是，我不时地查看您的问题和 jsfiddle，有时 Safari 显示它与 Chrome 相同，有时则与其不同。 - Daniel Kurz

这也可能是显示驱动程序的错误...我在Intel HD3000（2011 MBA）和HD4000（新Mac Mini）上看到过这种情况。 - Steven Lu

截至Safari版本6.0.4（8536.29.13），行为仍与Chrome不一致。 - Steven Lu

Answer 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

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

(经过多次编辑。)

- tiffon

---

我认为为了保持一致性，您需要将中间值设置为rgba(0,0,0,0)。 - Mark Ransom

我不明白，OP使用的是 rgba(255,128,128,0)，而且在链接的 jsFiddle 中也是同样的值。如果中间的值都是 0，则渐变中会有更多的灰色。 - tiffon

但这就是问题所在，Safari将rgba(255,128,128,0)解释为rgba(0,0,0,0)，为了使Chrome保持一致，您需要让它们都使用相同的值。 - Mark Ransom

我添加了一张截图。我仍然不明白你的意思。如果Safari错误地解释rgba(255,128,128,0)，那么看起来想法就是让Safari正确解释它。我猜这两种方法都可以，你可以通过限制使用的渐变（适应Chrome到Safari）或通过向CSS文件添加冗余信息（解决Safari的错误）来解决Safari的错误。值得注意的是，Safari 6.0.2呈现的方式与Chrome相同。 - tiffon

有趣的解决方法，谢谢@tiffon。我认为这仍然会导致差异，因为我试图将这个透明度渐变覆盖在不透明的渐变上，当然的想法是让颜色完全匹配。通过添加额外的颜色停止来强制实现效果，我们可以大大减少差异区域，但结果仍然会出错，因为任何时候alpha < 0时，颜色都会被错误地缩放...但这绝对是一个进步，因为这是一种至少能让红色显示出来的方法。 - Steven Lu