Градиентные концы размыты при использовании пиксельных измерений

Question

Я использую свойство css background-image: linear-gradient для создания нескольких цветных полосок для фона сайта.
Обычно градиентные остановки определяются процентом, но мне нужны пиксели на моем сайте, поэтому мне удалось изменить его на пиксели, используя метод lea Verou, используемый в ней. patterns Проблема в том, что конец каждого цвета немного размыт. В Firefox это менее заметно, но в Chrome это очень заметно.
Есть ли способ справиться с этим?
Я заметил, что когда я меняю «град» с 180 до 45, концы выглядят великолепно. Но, к сожалению, мне нужно полосы должна быть горизонтальной :)

Мой код: http://cssdesk.com/c6mGM

Answer 1

Почти год спустя, и я столкнулся с такой же ошибкой в ​​хромированной V36. Я произвел работу здесь: http://codepen.io/davidgailey/pen/ncrKB

или здесь, если вы предпочитаете: https://gist.github.com/davidgailey/8fc1bd1a09747429a3ad

Обходной использует фон-размер, фон-позиции и линейных градиентов.

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

Viola! красивые четкие горизонтальные полосы. Он мог бы использовать некоторую работу, чтобы быть более дружественной к будущему.

Я надеюсь, что эта ошибка будет исправлена ​​в ближайшее время, но в то же время, не стесняйтесь использовать мое перо в качестве начала.