Почему размывает градиент?

248

13 июля 2017, 00:38

Подскажите почему размывает линию градиента?
Переход делаю резкий, в браузерах mac os все четко а на винде в хроме размазывает.

Винда:

Osx:

.wrapper { 
    background: -webkit-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -moz-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -o-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -ms-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: linear-gradient(10deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    height: 500px; 
}

<div class='wrapper'></div>

Answer 1

Mozilla Firefox при 45deg без зубчиков. Наверное за отображение отвечает браузер.

.wrapper { 
    background: -webkit-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -moz-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -o-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -ms-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: linear-gradient(45deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    height: 500px; 
}

<div class='wrapper'></div>

Добавлено

В некоторых случаях края линий становятся зубчатыми, причем их отрисовка зависит от браузера: Chrome справляется лучше, в Firefox видны ступеньки. Чтобы сделать край плавным, можно сделать стык между цветами не четкий, а размытый, шириной 1-2%. Также следует помнить о проблеме с прозрачными цветами в Firefox — это решается использованием нужного оттенка с полной прозрачностью.

http://yoksel.github.io/css-patterns/

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

https://codepen.io/yoksel/pen/eolqw

Попробуй так:

$transparent: rgba(0, 0, 0, 0);
$color-1: #5d466f;
$size: 100%;
$big-size: $size*1;
$min: 0;
$max: $size*0.668;
.wrapper  {
    height: 500px;
    width: 100%;
  background: 
    linear-gradient(10deg,
      $color-1 $max, 
      $transparent $max*1.005
      ) 
    ;
  background-size:  $big-size $big-size;
  }
<div class='wrapper'></div>

Answer 2

Можно убрать лишний #5d466f 52% должно помочь

.wrapper { 
    background: -webkit-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -moz-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -o-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: -ms-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    background: linear-gradient(10deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff 100%); 
    height: 500px; 
}