Небольшая сплошная линия, появляющаяся в градиенте CSS? Градиент не является гладким

Question

У меня есть страница, где тело имеет цвет фона. У меня есть нижний колонтитул с фиксированной позицией над текстом, который прокручивается за ним.

Я использовал градиент css3, чтобы попытаться создать эффект затухания, но, кажется, где-то вдоль градиента наблюдается более яркая линия. Любые советы по удалению этой строки будет принята с благодарностью. В идеале Я бы хотел избежать использования изображений, поскольку цвета на разных страницах динамически меняются , поэтому было бы неплохо не создавать новое фоновое изображение для каждого цвета.

Я создал jsbin для демонстрации:

http://jsbin.com/okedut

Я также сделал снимок экрана и увеличил контрастность / размер в фотошопе, что подтверждает, что действительно по какой-то причине появляется линия:

Answer 1

Это похоже на ошибку браузера, когда вы используете значения rgba.

Эффект, который вы хотите достичь, можно сделать с помощью масок CSS.

http://www.webkit.org/blog/181/css-masks/

Для FF вы можете использовать SVG-решение:

https://developer.mozilla.org/en/applying_svg_effects_to_html_content