1

I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:

 background-color: #d3d3d3;
 background-repeat: repeat-x;
 background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
 background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
 background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
5
  • What do you mean is something like bars of solid color building the gradient?
    – fiskolin
    Nov 26, 2013 at 15:39
  • 1
    Works perfect jsfiddle.net/acyNw/66
    – DaniP
    Nov 26, 2013 at 15:43
  • Well it looks like this: d.pr/i/1fVU
    – MarcL
    Nov 26, 2013 at 15:45
  • Check your Firefox version or screen resolution, may be you have not installed display drivers !
    – Shivanshu
    Nov 26, 2013 at 15:52
  • Well it's not me, the client's computer displays stuff like this and my cross-browser testing software (browserstack) does the same...
    – MarcL
    Nov 26, 2013 at 15:56

1 Answer 1

0

According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).

Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?

4
  • Yes, works without a problem in IE10 (and several older versions) and all Chrome versions I tested. Don't have an idea what's wrong with that code...
    – MarcL
    Nov 26, 2013 at 16:11
  • Try removing the percentage marks in your linear-gradient. That will mean "darker at 0%, lighter at 100%" which is really close to what you specified.
    – gchiconi
    Nov 26, 2013 at 16:23
  • I tried everything you wrote, my body looks like this: body { /* fallback */ width: 100%; height: 100%; background-color: #d3d3d3; background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#fcfcfc'); background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253)); font-family: 'EB Garamond', serif; background-attachment: fixed; } Still issues...
    – MarcL
    Nov 27, 2013 at 12:50
  • What Firefox version are you using?
    – gchiconi
    Nov 27, 2013 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.