Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Poor gradient perfomance in Firefox

Poor gradient perfomance in Firefox

Problem

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:
}
Problem courtesy of: aXul

Solution

bug657603

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

Solution courtesy of: aXul

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Poor gradient perfomance in Firefox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×