Chrome中的CSS3盒子阴影非常慢

Question

我一直在开发专门针对现代浏览器的应用程序,并且已经非常大量地使用了box-shadow属性.

直到最近,这对所有支持的浏览器都是绝对正常的.然而大约一个月前,当我在Chrome中测试时,我注意到滚动"非常"缓慢,几乎无法使用.

在过去的一个月里,我尝试了删除脚本/弄乱我的html结构,你能想到的一切,直到今天我找到了原因.

如果在我设置的所有元素上禁用了box-shadow/webkit-box-shadow,问题就会消失.

令我感到奇怪的是,它在Chrome中运行良好,直到一个月前.顺便说一句,在Windows版本的safari上滚动很好,尽管比IE/Opera和Firefox慢一点.

这是一个已知的问题吗？有人有解决方法吗？

最重要的是,是否存在另一种在不使用CSS3属性的情况下复制相同效果的方法？

Answer 1

去年在Webkit中打开并关闭了一个错误报告:

CSS3 box-shadow导致Safari 5.0.2上的滚动延迟(性能下降)？

似乎Chrome在旧版本上有一个开放的错误:

http://code.google.com/p/chromium/issues/detail?id=95164

Airbnb最近讨论了这个问题,并且实际上改变了他们的最终设计:

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

最近有一群人对以编程方式测试CSS性能感兴趣.这是一个可用于开始自己测试的书签:

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

与此同时,你是正确的,黑客边框图像是一种选择.看看这里:

使用CSS3 box-shadow属性滚动延迟？