google-chrome - Chrome 中的 CSS3 box-shadows 非常慢

Question

我一直在开发一款专门针对现代浏览器的应用程序，并且大量使用了 box-shadow 属性。

直到最近，这在所有支持的浏览器上都完全正常。然而，大约一个月前，当我在 Chrome 中进行测试时，我注意到滚动“极其”缓慢，以至于几乎无法使用。

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

在我为其设置的所有元素上禁用 box-shadow/webkit-box-shadow 后，问题就消失了。

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

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

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

Answer 1

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

CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?

Chrome 似乎在旧版本上有一个 Unresolved 错误:

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

与此同时，您认为破解 border-image 是一种选择是对的。在这里查看:

Scroll Lag with CSS3 box-shadow property?