Linear-gradients artifacts in Mozilla Firefox

Question

I have problem with linear-gradient in Mozilla Firefox 16.

On screenshow bad thing is visible (bad - light line at the bottom of block).

Code:

<a href="#">Button Text</a>

And CSS part:

a {
    background: -moz-linear-gradient(center top , #88EB52, #3CA82D);
    border: 1px solid #399A29;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 54px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
    width: 376px;
}

I've changed line-height property on screenshot .

Can anyone describe what is it line and how to hide it?!

Thank you. Sorry for my English.

Answer 1

Tested in FF16 and working as expected. Maybe if you provide the line height value when the issue is appearing we can track the error. I suspect this is due to aspect ratio, if the issue is happening at all.

It's not a flaw, but for consistency try to use percentage or values on gradient lines:

background: -moz-linear-gradient(center top, #88EB52 0%, #223312 100%);

Here is the working fiddle: http://jsfiddle.net/FVcdu/1/

Answer 2

I also stumbled across this odd bug in Firefox. It took a while but i narrowed it down to being a declaration missing from the css.

When you do gradients you should try and have all different browser standards in there so that your gradients looks as good as possible in all browsers. I can recomend using Ultimate CSS Gradient Generator which will provide you css delcerations for all browsers possible.

The one declaration missing for me, and that solved it in the end, was the W3C standard: linnear-gradient().

background: linear-gradient(to bottom,  #CCCCCC 0%,#EEEEEE 100%);

So adding that in your code could possible solve your issue with the bottom 1px line in your gradients as it did so for me.

Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/