Search code examples
cssmozillaradial-gradients

Why scrolling with moz-radial-gradient is so slow?

I attached this style attribute to body tag:

style="background: -moz-radial-gradient(center center , circle , rgb(223, 224, 228), rgb(189, 193, 200)) no-repeat fixed 0% 0% #fff;"

And scrolling the page became very hard - it was lagging and scrolling slowly. Is it supposed to be so?

Edit: Not only scrolling, all other jquery effects become slow too.

Solution

  • Its a known issue that a gradient background with background-position:fixed has perfomance problems.

    This is the price you pay for using pre-release CSS (ie anything with a browser prefix such as -moz). Most of the time they work fine, but as long as they've got that prefix, it indicates that the vendor doesn't consider the feature to be finished, so you use it at your own risk.