6

I have noticed that a background gradient in Firefox is not so smooth rendered compared to chromium.

Firefox: enter image description here

Chromium: enter image description here

Firefox renders the gradient with more "artifacts" and not a homogeneous color fade. Is there a way to smooth that, that the results looks as good as in chromium?

body{
    background-color: #2e3236;
    background-image: radial-gradient(circle, #4e505298 0, rgba(35, 40, 46, .5) 15%, #101418 95%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Improve this question
4
  • @ÁlvaroGonzález Yes, when you run the snippet it produces the exact same output as seen on the screenshots. Ubuntu 18.04 x64, Firefox v107. Same result on Android, Chrome smooth, Firefox artifacts.
    – Marc
    Commented Jan 10, 2023 at 12:08
  • refer this post also this may help you
    – dev.skas
    Commented Jan 10, 2023 at 12:08
  • @dev.skas I found that question as well, but the OP is using a radial gradient. Oh, and if you think a question is a duplicate, you should generally use Flag > Needs improvement > Duplicate.
    – Julia
    Commented Jan 10, 2023 at 12:12
  • This is interesting. I ran into a similar problem a few days ago, but i got the banding in both chrome and firefox, so after doing some research I just put it away as "i have a shitty monitor". But seeing a difference here makes me wonder, if ther actually IS a solution to this other than buying an oled screen
    – Matthias Seifert
    Commented Jan 10, 2023 at 17:23

1 Answer 1

Reset to default
0

Found a fix:

  • go to: about:config
  • look for: "gfx.webrender.dcomp-win.enabled"
  • disable the option - set it to 'false'
  • restart firefox

https://i.imgur.com/jPUYK7b.png

Improve this answer

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