linear-gradient to transparent bug in latest safari?

问题

I'm applying a basic linear-gradient like this:

background-image:  linear-gradient(to top, red, rgba(0,0,0,0));

this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color:

here's chrome (how it is supposed to be):

and here's safari

I've tried prefixing it with -webkit-, changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this?

here's a fiddle https://jsfiddle.net/2Lrp3sv1/2/

回答1:

This has to do with the way browsers render transparent.

For most browsers,

transparent === rgba(255,255,255,0)

But Safari renders it as

transparent === rgba(0,0,0,0)

So if you have a gradient from transparent to white (or rgba(255,255,255,1)), for most browsers you're only changing the alpha from 0 to 1 along the gradient.

But for Safari, you're changing the alpha from 0 to 1 and the color from 255 to 0, so you get a gradient of greys.

This drove me crazy for a while.

回答2:

No browser renders transparent as rgba(255, 255, 255, 0), that's completely wrong. transparent is always rgba(0,0,0,0), as defined in the CSS Color 3 specification. However, a few years ago we changed how color interpolation works in gradients and specified it should happen in a premultiplied RGBA space, exactly to fix this issue and make interpolation with transparent work as expected. Looks like other browsers have implemented this change, but Safari hasn't yet. If you want gradients with Safari to look the same, you need to use color stops that utilize the transparent version of the color you are interpolating to/from (which may sometimes require two color stops at the same position, if these colors are different), in this case linear-gradient(to top, red, rgba(255,0,0,0)). Or just wait for Safari to catch up! :)

回答3:

i am seeing this in Safari, too. For me, it is fading to a light red, even though none of the colors I use is anywhere near red.

I solved it using 'transparent' as the value. Once I stopped using rgba, it looked like expected.

回答4:

Based on what @AJFarkas wrote, just replace transparent with rgba(255, 255, 255, 0) and it works fine on Safari!

In my case it was a linear gradient from white to transparent to white:

background-image: linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #fff 90%);

回答5:

I had a situation where the colours in the gradient were being dynamically applied by a CMS, so here's a Javascript fix for this issue in Safari that takes this into account.

Assuming you're using a pseudoclass to achieve this, you can use js to return the element, create a new style tag and insert it into the head of the document.

<script>
    var col = document.querySelector('.my_div').style.color;
    var style = document.createElement('style');

    // Replace RGB with RGBA (we need the opacity)
    col = col.replace(/rgb/i, "rgba");
    col = col.replace(/\)/i,', 0)');

    //Create our new styles based on the returned colours
    style.innerHTML =
      '.my_div::before {' 
    + 'background-image: linear-gradient(to left, currentColor 0%, '
    + col 
    + ' 15%);'
    +'}';

    var ref = document.querySelector('script');
    // Insert our new styles before the first script tag
    ref.parentNode.insertBefore(style, ref);
</script>

Here's the source of this great trick

来源：https://stackoverflow.com/questions/38391457/linear-gradient-to-transparent-bug-in-latest-safari

标签

css

safari

linear-gradients

rgba