为什么这个 CSS 会导致 Firefox 挂起/崩溃？答案

【问题标题】：Why does this CSS cause Firefox to hang/crash?为什么这个 CSS 会导致 Firefox 挂起/崩溃？
【发布时间】：2011-09-27 00:32:51
【问题描述】：

以下 CSS 背景大小和渐变在应用于大型 div 时会导致 Firefox 挂起/崩溃。渲染渐变可能非常密集，但有谁知道为什么 Firefox 会崩溃而 Webkit 处理类似的 CSS 而不会失败？

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);

看起来减小背景大小会导致 Firefox 崩溃“更严重”，因为我假设这会导致渲染更多渐变。

在 6.0.2、5.0.1 上崩溃，但在 3.6.22 上渲染非常缓慢。

【问题讨论】：

什么版本？能提供一个测试用例吗？ jsfiddle.net/jsbin.com。另外：bugzilla.mozilla.org
见 jsfiddle.net/C8dTT - 适用于 Firefox 6 和 Firefox 9.0a1。
我的错误，伙计们。原来我错过了导致崩溃的另一行 CSS。我已经编辑了我的问题。谢谢！
另外，将代码行添加到 jsfiddle.net/C8dTT 会导致挂起/崩溃。（我正在运行 6.0.2）

标签： css firefox

【解决方案1】：

在 Firefox 6 或 Firefox 9.0a1 中使用 http://jsfiddle.net/C8dTT/2/ 作为测试用例对我来说没有崩溃，它只是挂了一段时间但最终完成了。计算梯度显然效率低下，花费的时间太长 - 您要求浏览器对网页的每个 4x4 字段重复该计算也无济于事。有趣的是，当我在调试器中停止执行时，运行的代码属于英特尔图形驱动程序。如果在 Firefox 中将 gfx.direct2d.disabled 首选项设置为 false，也没有问题。因此，根本原因可能是 Direct2D 或图形驱动程序中的错误 - 仍然值得在 https://bugzilla.mozilla.org/ 提交错误报告，但是，他们将希望解决这种病态情况。

请注意，Firefox 3.6 没有 GPU 加速，这就是您看不到挂起的原因。

【讨论】：

【解决方案2】：

你遇到了https://bugzilla.mozilla.org/show_bug.cgi?id=632324

【讨论】：