firefox - CSS3 background-size 属性在 ff5 中导致极端性能问题

Question

我今天一直在整理一个页面，我想我应该使用 CSS3 实现条纹背景。在除 Firefox 之外的所有浏览器中，一切似乎都很好。 (我使用的是 5.01，但也 checkin 了 5.0)

代码很简单:

    body {
    background-color: #ebeced;
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%,
    transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
    background-size:6px 6px;
    }

在 Chrome 和 Opera 中运行良好，但它实际上会导致 FF 崩溃。

显然我知道我可以通过重复的背景图片来实现这种效果，但我想知道是否还有其他人遇到过类似的问题，或者它只是 CSS3 的新问题 ;)

在 jsfiddle 中测试会产生同样的问题，我没有制作 fiddle 是因为我不想让你崩溃!

哦，这不是电脑速度慢的问题，我使用的是 i7、8gb 内存，等等。

我认为这是 background-size 属性的问题，就好像你增加它或完全删除它然后问题就解决了，但是它不适合我，除非我可以使用 background-size。

Answer 1

我很确定我知道问题出在哪里。

性能问题对我来说不是很明显，但我使用的是新的四核处理器。我看到的是，当我创建一个空白页面并将该 css 放在那里时，如果我调整浏览器的大小，重绘会有点笨拙。

问题在于您将绘制 CSS3 渐变与以非常小的尺寸 (6px) 平铺该渐变相结合。这意味着对于每 1000 sq.px 的页面空间，渐变将平铺 27,777 次 [1000/6 平方]。那是一吨!智能浏览器会绘制一次渐变，然后平铺它。似乎 Firefox 可能每次都会绘制渐变。如果是这样的话，那确实是一个错误。如果我将背景大小属性修改为更大的值，例如 20px，那么我将不再看到性能问题，但其他人会。如果您不希望您的用户遇到这些类型的问题，我会说您应该远离这种组合，因为较慢的计算机在您看不到任何问题时仍然会出现问题。

简单的解决方法是不使用 css3 渐变。只需创建一个图像——浏览器擅长平铺这些图像。即使有图像，有时使用较大的图像会更好......

---

如果背景小于 40x40 像素，早期版本的 Netscape Navigator 会忽略背景。我记得发现了我试图解决的错误的原因，并意识到即使能够使用 1x20 图像作为背景看起来不错，因为这是最小文件大小，但这并不是最佳选择性能，因为它为浏览器创建了更多的渲染工作。相反，我创建了一个更大的 50x20 版本的图像。效果是一样的，但是节省了一些处理时间。