Question

I’m currently working on a css3 gradient background which works fine on Chrome but terrible on Firefox. I noticed it’s due the background-size property in my css. Is there any way to make exactly the same background but with different methods?

body {
    background: -webkit-linear-gradient(45deg,  #cccccc 0%, #cccccc 25%, #bbbbbb 25%, #bbbbbb 50%, #cccccc 50%, #cccccc 75%, #bbbbbb 75%);
    background:    -moz-linear-gradient(45deg,  #cccccc 0%, #cccccc 25%, #bbbbbb 25%, #bbbbbb 50%, #cccccc 50%, #cccccc 75%, #bbbbbb 75%);
    background-size: 30px 30px:
}

Answer 1

bug657603

turns out it is a bug on mozilla firefox… poor performance when using low res gradient patterns on backgrounds, as Jonah Bishop posted