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

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

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

Ответы

Ответ 1

Почти год спустя, и я столкнулся с той же ошибкой в ​​chrome 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! красивые четкие горизонтальные полосы. Он может использовать некоторую работу, чтобы быть более дружественной к будущему.

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