csssafariradial-gradientscss-gradients

How to make radial gradients work in Safari?

I'm using radial-gradients on a new site that i'm building, but the colours are rendering differently (much darker) in Safari on desktop. Is there a better cross-browser syntax to use?

I've tried different prefixes, but this hasn't fixed the issue. The code i'm using is as follows. 

.item1 {
  background: -webkit-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -webkit-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: -o-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -o-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

The correct output as currently seen in Chrome and Firefox: https://i.sstatic.net/ej9pO.jpg

The output within Safari: https://i.sstatic.net/KYa13.jpg

As you can see it's much darker in Safari.

Does anybody have any ideas on how to fix that?

Solution

  • To start with, your gradient can be simplified like below.

    .box{
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), 
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
 height:200px;
}

body {
 background:blue;
}
    <div class="box">

</div>

    Now the issue is that safari don't support the syntax used with at as you can see in the MDN page:

    enter image description here

    You can change your syntax like below. I will split the gradient to better see the result, then you can easily combine them.

    The first gradient:

    .box{
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), red);
 height:200px;
}

.box2{
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5), red) top right/200% 200%;
 height:200px;
}
    <div class="box">

</div>
<div class="box2">

</div>

    The second gradient

    .box{
 background:  
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), red 300px);
 height:200px;
}

.box2{
 background:  
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), red 300px) top left/200% 200%;
 height:200px;
}
    <div class="box">

</div>
<div class="box2">

</div>

    The trick is that if you remove the at, the gradient will by default start from the center and when starting from the center we need an X distance to reach either the corner or the sides unlike when we start from a corner when we will need twice the X distance. That's why I made the gradient to have a size of 200% 200% and the I simply adjust the background position to have the same visual.

    Here is the final background:

    .box{
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5) , transparent) top right/200% 200%, 
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px) top left/200% 200%;
 height:200px;
}

body {
 background:blue;
}
    <div class="box">

</div>

    Related question: How to animate a radial-gradient using CSS?