Gradient ends are blurry when using pixel measurements

Question

I'm using the background-image: linear-gradient css property to create multiple color strips for a site background.
Usually gradient stops are defined by percentage, but I needed pixels in my site, so I managed to change it to pixels using the method lea Verou used in her patterns The problem is that the end of each color is a bit blurry. In Firefox it's less noticeable, but in Chrome it's very noticeable.
Is there a way to handle it?
I noticed that when I change the 'deg' from 180 to 45 the ends look great. But unfortunately I need the stripes to be horizontal :)

My code: http://cssdesk.com/c6mGM

Answer 1

Almost a year later and I run into the same bug in chrome v36. I produced a work around here: http://codepen.io/davidgailey/pen/ncrKB

or here if you prefer: https://gist.github.com/davidgailey/8fc1bd1a09747429a3ad

The work around uses background-size, background-position, and linear gradients.

background-size: 100% 150px, 100% 150px;
background-position: 0 0, 0 bottom;
background-image:
linear-gradient(#000,#000),
linear-gradient(green, green);

Viola! nice crisp horizontal stripes. It could use some work to be more future-friendly.

I hope this bug is fixed soon but in the mean time, feel free to use my pen as a start.