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

Question

Вот проблема, с которой я сталкиваюсь: Chrome Firefox.

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

Но обычно я использую Firefox, а не хром. И долгое время я думал, что, возможно, мой метод был бесполезным, потому что он действительно работал только с интервалами в пять пикселей. Так что это было очень ненадежно. Но недавно я обнаружил, что Chrome на месте. Поэтому я собрал тестовый фрагмент, который я покажу вам ниже, чтобы точно продемонстрировать поведение.

Может кто-нибудь сказать мне, почему происходит такое поведение, и что я могу с этим поделать?

.demo {
  
  background-color: black;
  display: inline-block;
  font-family: arial;
  font-size: 32px;
  line-height: 42px;
  text-align: center;

}


.demo:after {
  content: 'CRISP';
  color: white;
}


.one {

  background-image: linear-gradient(black 1px, transparent 1px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
  height: 42px; width: 126px;

}


.two {

  background-image: linear-gradient(black 2px, transparent 2px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
  height: 42px; width: 126px;

}


.three {

  background-image: linear-gradient(black 3px, transparent 3px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
  height: 42px; width: 126px;

}


.four {

  background-image: linear-gradient(black 4px, transparent 4px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
  height: 42px; width: 126px;

}


.five {

  background-image: linear-gradient(black 5px, transparent 5px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
  height: 42px; width: 126px;

}


.six {

  background-image: linear-gradient(black 6px, transparent 6px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
  height: 42px; width: 126px;

}

What you see (unless you're experiencing the same problem I am):<br />
<div style="width: 776px;">
  
<div class="demo one"></div>
<div class="demo two"></div>
<div class="demo three"></div>
<div class="demo four"></div>
<div class="demo five"></div>
<div class="demo six"></div>

</div><br />

What I see:<br />
<img src="http://i.imgur.com/dvxszeJ.png" /><br /><br />

Don't let the even odd pattern fool you though... A different test run produced these results:<br />
<img src="http://i.imgur.com/f4nWWtF.png" />

Вот лучше взглянуть на плохо себя ведущие коробки:

Меня попросили предоставить точную строку кода для проблемного градиента от черного к прозрачному

div.fluxclass { /*which gradients are effected depend on seemingly random circumstances*/
  background-image:
    linear-gradient(to bottom, #000 5px, transparent 5px);
}