Why does this CSS cause Firefox to hang/crash?

The following CSS background-size and gradient, when applied to large divs, causes Firefox to hang/crash. Rendering gradients can be pretty intensive, but开发者_Go百科 does anyone know why Firefox flat out crashes while Webkit handles similar CSS without failing?

background-size: 4px 4px;
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .02) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .02) 75%,
    transparent 75%, transparent);

Looks like reducing the background-size causes Firefox to crash "harder," as I'm assuming this causes more gradients to be rendered.

Crashes on 6.0.2, 5.0.1, but renders very slowly on 3.6.22.

There is no crash for me using http://jsfiddle.net/C8dTT/2/ as test case in either Firefox 6 or Firefox 9.0a1, it simply hangs for a while but gets done eventually. There is clearly an inefficiency in calculating the gradient, it takes too long - and it doesn't help that you ask the browser to repeat that calculation for every 4x4 field of the webpage. Interestingly, when I stop execution in a debugger the code running belongs to the Intel graphics driver. There is also no issue if gfx.direct2d.disabled preference is set to false in Firefox. So the root cause is likely a bug in either Direct2D or the graphics driver - should still be worth filing a bug report at https://bugzilla.mozilla.org/ however, they will want to work around that pathological case.

Note that Firefox 3.6 doesn't have GPU acceleration which is why you don't see the hang there.

You're running into https://bugzilla.mozilla.org/show_bug.cgi?id=632324