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

Question

这张图片应该可以解释这一切。左边是Safari6，右边是Chrome。不仅透明红色渐变的下半部分完全错误(这可能是过度热衷于预乘alpha的情况)，上半部分也更暗，这看起来像是一个伽马校正问题。

这个问题出现在Mountain Lion上的Safari6和iOS6 Mobile Safari上，但不是在Lion上的Safari6上。

http://jsfiddle.net/ZUTYm/4

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

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

​

​

Answer 1

我能够在Mac10.8.1 Safari6.0 (8536.25)和iOS Safari6.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

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

​

​

(多次编辑。)