CSS: нечеткий линейный градиент в Firefox

Question

Элемент фона с линейным градиентом CSS имеет нечеткие переходы между цветами, даже когда остановки находятся в одном месте.

У меня есть элемент с фоном, определенным так:

background:linear-gradient(to right,
    blue, blue 10%,
    red 10%, red 30%,
    yellow 30%, yellow 40%,
    green 40%, green 50%,
    black 50%
  );

В Firefox переходы между цветами размыты. Если я использую repeating-linear-gradient, края будут четкими. Обе четкие в Chrome.

У меня есть пример пера здесь: https://codepen.io/anon/pen/rPVWZE?editors=1100#0

Есть идеи, как это исправить?

Answer 1

Здесь эффект на FF. Я нарисовал несколько пикселей, чтобы показать уровень масштабирования:

Обходной путь:

.linear{
  height:100px;
  
  background-image:
        linear-gradient(to right, blue 0, blue 100px),
        linear-gradient(to right, red 0, red 100px),
        linear-gradient(to right, yellow 0, yellow 100px);
  
  background-size:
        100px 100px,
        100px 100px,
        100px 100px;
  
  background-position:
        0 0,
        100px 0,
        200px 0;
  
  background-repeat: no-repeat;
}

<div class = "linear"></div>