iOS Safari: CSS градиент слишком темный, когда помещен на аналогично окрашенный фон

У меня есть синий ящик. Я хочу поместить Наложение градиента, которое исчезает от прозрачного до синего в нижней части этого синего поля, так что переполненный текст постепенно исчезает внизу.

вот как это должно выглядеть (и выглядит, как на большинстве браузеров):

enter image description here

вот как это выглядит в iOS Safari:

enter image description here

Я создал скрипку, чтобы продемонстрировать эту проблему: 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);

Как вы можете видеть, цвет, который выцветает в Safari, темнее, хотя это тот же цвет. Поэтому, когда текста недостаточно, фейдер все еще неловко виден. Есть ли способ исправить это, чтобы Safari отображал градиенты, как и другие браузеры?

1 ответов


Safari отображает правильно.

С линейный-градиент вы можете определить:

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> ]?

таким образом, ваш градиент идет от черный С нулевой непрозрачностью (rgba(0,0,0,0)) до нужного цвета (#034b81).

посмотреть: RGBA(красный,зеленый,синий,прозрачность)

вот почему вы видите эту черную линию в Safari.

чтобы достичь желаемого внешнего вида, просто измените значение rgba на значение вашего цвета. так ваш код должен выглядеть так:

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 {
  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>