Firefox 4.0+ has performance problem with background-size property

Firefox starts supporting standard background-size property since 4.0. But unfortunately, it likely doesn’t render this property properly. If you are using Firefox 4.0+ or Chrome, you might have noticed the angled striped background on my site. The current background-size is:

body {
	...
	background-size: 100px 100px;
	...
}

If you change it to a smaller size with firebug or other tools on your browser, you would see the stripes get thinner. It works perfect on Chrome but DON’T do it on Firefox 4.0+, as if so it would cause Firefox hanging forever. I guess the algorithm Firefox is using to render background-size needs to be optimised for small size.

I found this problem because my ideal effect of my site is to use very thin stripes as background. If you are brave, try this beautiful but dangerous change on my site.

body {
 ...
 background-size: 5px 5px;
 ...
}
comments powered by Disqus