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);
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.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With