为什么锐利的渐变过渡会在firefox中变得模糊？

Question

以下是我遇到的问题： Chrome Firefox 。

我觉得应该有一种方法可以用渐变创建清晰明快的过渡效果。通过将两个双色节点分开几个像素，然后在与第二个双胞胎相同的像素上放置一个独特的颜色节点，可以创建一个清晰的颜色过渡。

但通常我使用的是Firefox，而不是Chrome。并且在最长的时间里，我认为我的方法可能是多余的，因为它实际上只能以五个像素的间隔工作。所以这是非常不可靠的。但最近我发现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);
}