Safari 6 Gradient color blending/interpolation bug

css, gradient, graphics, safari, webkit

Solution

I was able to reproduce the problem on Mac 10.8.1 Safari 6.0 (8536.25) and iOS Safari 6.0.1. I think applying a `-webkit-mask-image` instead of a transparent color-stop avoids the issue:

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

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

jsFiddle

In the image, the top shows over a white background, bottom shape shows over an opaque gradient background of the same colors.

(Many edits.)

Problem

The picture should explain it all. To the left is Safari 6 and behind it on the right is Chrome. Not only is the bottom half of the transparent red gradient completely wrong (which could perhaps be a case of overzealous premultiplied alpha) the top half is also darker which looks like a gamma-correctness problem. This problem surfaces on Safari 6 on Mountain Lion and iOS6 Mobile Safari, however not on Safari 6 on Lion. http://jsfiddle.net/ZUTYm/4 Has anybody found a solution for obtaining expected results? I need my gradients to involve alpha because I'm trying to fade text in and out of things. Since I can't finish my edit till I put in real code here is the gradient definition: `background-image: -webkit-linear-gradient(top, red, rgba(255,128,128,0), white);`

Original source