Safari 6 Error mixing color / gradient interpolation

Question

The picture should explain everything. Safari 6 is on the left, and Chrome is on the right. Not only is the lower half of the transparent red gradient completely wrong (which may perhaps be the case of over-complicated pre-multiplied alpha), the upper half is also darker, which looks like a gamma-correctness problem.

This issue occurs on Safari 6 on Mountain Lion and iOS6 Mobile Safari, but not on Safari 6 on Lion.

http://jsfiddle.net/ZUTYm/4

Has anyone found a solution to get the expected results? I need my gradients to include alpha, because I'm trying to fade text into and out of things.

Since I cannot finish my editing before entering the real code, here is the definition of the gradient: background-image: -webkit-linear-gradient(top, red, rgba(255,128,128,0), white);

Answer 1

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 that using -webkit-mask-image instead of transparently stopping the color eliminates the problem:

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

jsFiddle

The image above is displayed above a white background, the lower figure shows an opaque gradient background of the same color.

(Many changes.)