iOS Safari: CSS gradient too dark when placed over similarly colored background

Question

I have a blue box. I want to place a gradient overlay that fades from transparent to blue at the bottom of this blue box, so that overflowing text gradually fades out at the bottom.

Here's what it should look like (and does look like on most browsers):

Here's what it looks like on iOS Safari:

I've created a fiddle to demonstrate this issue: https://jsfiddle.net/cy89ocrs/11/

 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, #034b81));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), #034b81);
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), #034b81);
  background-image: linear-gradient(rgba(0, 0, 0, 0), #034b81);

As you can see the color that is being faded to in Safari is darker, even though it is the same color. So when there's not enough text the fader is still awkwardly visible. Is there any way to fix this so Safari displays gradients like other browsers?

Answer 1

Safari is rendering correctly.

With linear-gradient you can define:

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

So your gradient goes from black with zero opacity (rgba(0,0,0,0)) to your desired color (#034b81).

See: rgba(red,green,blue,opacity)

That's why you see that black line in Safari.

To achieve your desired appearance, just change the rgba value to the value of your color. so your code should look like:

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);

Demo

div {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #034b81;
  color: white;
  overflow: hidden;
}
div:after {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25px;
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));
  background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);
  background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);
  background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies eget quam sit amet eleifend. Sed luctus risus justo, ut finibus metus commodo ut. Curabitur sit amet lobortis mi. Curabitur vel felis id ante accumsan imperdiet. Etiam at ornare ligula.
  Morbi consequat fermentum eros nec fermentum. Donec sodales molestie odio sollicitudin bibendum. Morbi semper ac nisl mattis semper. Donec sed lacus viverra, congue massa at, accumsan orci. Mauris et condimentum quam. Etiam imperdiet tempor quam non
  aliquam. Integer et pharetra metus, et porttitor velit. Mauris at turpis dui. Etiam odio felis, placerat sit amet massa et, suscipit pretium eros. Nulla iaculis elit id turpis dictum, id scelerisque est eleifend. Quisque in ex tincidunt, bibendum nisl
  non, tristique ligula. Curabitur venenatis purus nec sem placerat, sed sollicitudin libero tincidunt. Etiam ac turpis mattis, lobortis quam quis, sagittis nisi. Vivamus eget nisl commodo, vestibulum augue varius, pretium augue. Cras ultricies, velit
  nec ultrices commodo, leo enim dignissim odio, vitae aliquam nibh ex nec elit. Duis egestas faucibus turpis, nec tristique nisl accumsan nec. Phasellus lacus massa, vulputate sed nisl lacinia, pretium vestibulum mi. In tincidunt luctus dictum. Praesent
  elementum lorem eu erat mattis, quis convallis massa tristique. Cras rhoncus gravida dolor et rhoncus. Etiam et malesuada dolor. Sed in eros magna. Duis faucibus, ipsum eget ultrices dignissim, ipsum nunc consectetur nulla, in egestas nibh eros eget
  turpis. Phasellus vestibulum mollis ullamcorper. Maecenas lectus mi, hendrerit vel justo at, dictum varius lectus. Cras ac libero vehicula, interdum eros sagittis, tristique tellus. Mauris tincidunt porttitor nisl, nec aliquam velit egestas nec. Mauris
  nec gravida ipsum. Curabitur tempor velit nulla, sit amet laoreet elit euismod ac. Ut eros metus, consectetur sit amet purus eget, semper cursus nibh. In dolor nisl, vulputate ac augue et, luctus faucibus mauris. Donec eu ex ex. Donec ut elementum ligula.
  Donec nisl justo, pharetra eget quam id, commodo lobortis augue. Suspendisse sit amet tellus interdum, tempor odio nec, iaculis sapien. Praesent maximus quis lacus a condimentum. Morbi convallis sem metus, vitae lacinia dui interdum sed. Proin eget
  volutpat ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut molestie consectetur sem, at venenatis justo volutpat in. Sed lobortis dui vitae quam facilisis, gravida mattis justo volutpat. Aliquam elementum
  non nunc consequat elementum. Vestibulum vitae sodales nulla, a iaculis tellus. Nullam tincidunt, dui sed elementum dapibus, mauris turpis aliquam odio, id laoreet nisl sapien a metus. Suspendisse potenti. Integer viverra fermentum nulla at sodales.
  Proin viverra nulla eu felis tempus, vitae lacinia velit commodo. Phasellus eu nulla elementum, consequat orci eu, interdum metus. Nunc in tellus sed arcu egestas ullamcorper fringilla non purus. Nunc efficitur elementum sapien, in mollis diam volutpat
  at. Suspendisse non luctus risus. Nam rutrum est ligula, vel scelerisque felis volutpat id. Maecenas ornare molestie dui sed varius. Praesent vulputate dui purus, sed venenatis purus pellentesque ac. Etiam neque arcu, imperdiet sed enim in, laoreet
  ultrices nisl. Phasellus rhoncus lobortis ipsum, viverra accumsan eros feugiat id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget commodo risus. Donec tellus elit, imperdiet a fermentum eget,
  lobortis ac diam. Nulla dictum eros at neque tincidunt, at commodo tortor ultrices. In dapibus risus at tellus lobortis condimentum. In hendrerit et erat sit amet scelerisque. Vestibulum ultricies egestas efficitur. Ut finibus dolor et leo lobortis
  egestas. Nulla aliquam quam ut metus molestie tincidunt. Aenean ac commodo mauris. Nullam ultrices urna nisi, vitae commodo quam viverra pulvinar.</div>