CSS3背景大小属性导致ff5极端性能问题

今天我一直在把一个页面放在一起，并认为我会使用CSS3实现条纹背景。在Firefox以外的所有浏览器中，似乎都很好。（我使用的是5.01，但在5.0检查过）CSS3背景大小属性导致ff5极端性能问题

的代码很简单：

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产生相同问题，我没有做出小提琴，因为我不想让你崩溃负责！

哦，这不是一个缓慢的电脑问题，我在一个i7,8GB内存，等等等等。

我认为这是一个背景大小的属性问题，就好像你增加或完全移除它然后问题已解决，但它不适合我，除非我可以使用背景大小。

来源

2011-07-20 tcnarss

听起来像你应该报告的错误。猜测，这里发生的事情是平铺梯度非常慢，但是如果没有实际的测试用例很难分辨出来。我只是在Fx4和Fx5以及每晚都尝试过你的代码片段，而且都没有显示任何性能问题。但请注意，这可能取决于操作系统，现在我在Mac上。如果你真的在Mozilla上报告错误，请在cc字段添加“：bz”。或者，如果您可以指示我展示问题，我可以为您报告错误。 –

感谢您的回复。我现在在w7上，我只会开火雪豹并先在那里检查它，这样我可以发送更完整的错误报告。我会确保我cc .bz。 – tcnarss

我可以确认它不会影响Mac上的FF，现在写出bug。 – tcnarss

您是否尝试过加入...

-moz-background-size:6px 6px;

...你的CSS？

来源

2011-07-20 18:39:43

是甚至是合法的财产？我无法在任何地方看到它的参考。 +它不起作用！ – tcnarss

对于一些CSS3属性，为了兼容性（类似于'-webkit-'，'-o-'，'-khtml-'），您需要预先加入'-moz-'。对不起，这不适合你，但是。这是一个合法的属性：** http：//www.css3.info/preview/background-size/** –

我明白了！谢谢你让我知道，但是没有前缀的背景大小似乎适用于FF但它的速度非常慢，最终崩溃！ -moz-background-size似乎并没有被ff的最新版本拾取。 – tcnarss

我很确定我知道问题是什么。

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

这个问题来自于您将绘制CSS3渐变与平铺该渐变的非常小的尺寸（6px）相结合的事实。这意味着，对于每1000平方英尺的页面房地产，梯度将平铺27,777次[1000/6平方]。这是一吨！智能浏览器会绘制一次渐变，然后将其平铺。似乎Firefox可能会每次绘制渐变。如果是这样的话，那确实是一个错误。如果我将后台大小属性修改为更大的值，例如20px，那么我不再看到性能问题，但其他人会。如果你不希望你的用户遇到这种问题，我想说你应该远离这种组合，因为当你没有看到任何问题时，速度较慢的计算机仍然会出现问题。

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

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

来源

2011-08-31 10:05:38 MikeyLikesIt

CSS3背景大小属性导致ff5极端性能问题

回答

相关问题