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://imgur.com/a/fMJCbZE

The output within Safari: https://imgur.com/a/KwwiV1b

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

Does anybody have any ideas on how to fix that?

回答1:

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:

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>

来源：https://stackoverflow.com/questions/54215315/how-to-make-radial-gradients-work-in-safari

标签

css

css3

safari

radial-gradients

css-gradients