Угловой линейный градиент CSS не сглажен в Firefox и края - PullRequest
Новая
       77

Угловой линейный градиент CSS не сглажен в Firefox и края

0 голосов
/ 30 ноября 2018

Я уже некоторое время безуспешно пытаюсь выяснить, в чем проблема с этим css: 

  $body-gradient-0: #324359;
  $body-gradient-1: #304051;
  $body-gradient-2: #27394A;
  $body-gradient-3: #1C2C3E;
  $body-gradient-4: #172A40;
  $body-gradient-degrees: 150deg;

  .my-class {
    background: $body-gradient-1;
    background: -moz-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -webkit-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -webkit-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -ms-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -o-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
  }

площадка sassmeister

Это производитпрекрасные результаты в Chrome, Vivaldi, Opera (и, по-видимому, в любом другом браузере, использующем движок Blink или являющимся частью Chrome)

working gradient

ОднакоMicrosoft Edge, Firefox и Safari (я тестировал его с Epiphany, которая использует WebKit, поэтому я предполагаю, что Safari также будет иметь ту же проблему) производят следующее:

wrong gradient

Если вы откроете скриншоты в полноэкранном режиме, вы увидите, что первый из них плавно проходит через все цвета, а второй скорее "переходит" между цветами, как будто они"твердые края".

Я пытался выяснить, в чем проблема и почему это происходит без удачи.Кто-нибудь знает, в чем причина этой проблемы и как ее можно исправить?

Вот фрагмент: 

.my-class {
  width: 1920px;
  height: 1080px;
  background: #304051;
  background: -moz-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -webkit-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -webkit-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -ms-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -o-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
}
<div class="my-class">
</div>
...