我一直在开发一款专门针对现代浏览器的应用程序，并且大量使用了 box-shadow 属性。
直到最近，这在所有支持的浏览器上都完全正常。然而，大约一个月前，当我在 Chrome 中进行测试时，我注意到滚动“极其”缓慢，以至于几乎无法使用。
在过去的一个月里，我尝试过删除脚本/弄乱我的 html 结构，你能想到的一切，直到今天我终于找到了原因。
在我为其设置的所有元素上禁用 box-shadow/webkit-box-shadow 后，问题就消失了。
令我感到奇怪的是，直到大约一个月前，它在 Chrome 中运行良好。顺便说一句，在 windows 版本的 safari 上滚动很好，尽管比 IE/Opera 和 Firefox 慢一点。
这是一个已知问题吗？有人对此有解决方法吗？
最重要的是，是否有另一种方法可以在不使用 CSS3 属性的情况下复制相同的效果？
最佳答案
去年在 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 是一种选择是对的。在这里查看:
关于google-chrome - Chrome 中的 CSS3 box-shadows 非常慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8993541/