Here is the problem I'm facing: Chrome 
Firefox.
I feel like there should be a way to create sharp crisp transitions with gradients, and there IS. By placing two twin color nodes a few pixels apart, and then a unique color node on the same pixel as the second twin, a sharp color transition is created.
But usually I use Firefox, not chrome. And for the longest time I thought that maybe my method was wishy washy because it really only worked at intervals of five pixels. So it was very unreliable. But recently I discovered that Chrome is spot on. So I put together a test snippet which I'll show you below demonstrating the behavior precisely.
Can someone tell me why this behavior occurs, and what I can do about it?
.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" />Here's a better look at the misbehaving boxes:
I have been asked to provide the exact line of code for the problematic black to transparent gradient
div.fluxclass { /*which gradients are effected depend on seemingly random circumstances*/
background-image:
linear-gradient(to bottom, #000 5px, transparent 5px);
}