Question

The following CSS background-size and gradient, when applied to large divs, causes Firefox to hang/crash. Rendering gradients can be pretty intensive, but 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.

Answer 1

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 4×4 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.