问题描述
我一直在开发一个专门针对现代浏览器的应用，并且非常大量地使用了box-shadow属性。
I've been developing an app specifically for modern browsers and have made very heavy use of the box-shadow property.
直到最近，所有支持的浏览器。但是大约一个月前，我在Chrome中测试时发现，滚动极其缓慢，几乎无法使用。
Until recently this has been absolutely fine on all supporting browsers. However about a month ago when testing in Chrome I noticed that scrolling was 'extremely' slow, to the point of being almost unusable.
过去一个月我尝试过out / scripts /混乱我的html结构，一切你可以想到，直到今天我找到原因。
Over the past month I have tried ripping out scripts/messing with my html structure, everything you can think of until finally today I have found the cause.
使用box-shadow / webkit-box-shadow禁用所有的元素，我已经设置，问题消失。
With box-shadow / webkit-box-shadow disabled on all elements that I had it set for, the problem disappears.
什么打击我奇怪的是，它工作正常在Chrome直到一个多月前。顺便说一下，Safari版本的safari的滚动是很好，虽然比IE / Opera和Firefox慢一些。
What strikes me as odd is that it worked fine in Chrome until around a month ago. Incidentally the scrolling on the windows version of safari is fine, albeit a little slower than IE/Opera and Firefox.
这是一个已知的问题吗？有没有人有一个解决方法？
Is this a known problem? Does anyone have a workaround for this?
最重要的是，是否有另一种方法来复制相同的效果而不使用CSS3属性？
And most importantly, is there another method of replicating the same effect without using the CSS3 property?
推荐答案
去年在Webkit中打开和关闭了一个错误报告：
There was a bug report opened and closed in Webkit last year:
Airbnb最近讨论了这个问题，因为它改变了他们的最终设计：
Airbnb discussed the problem recently, and actually changed their final design because of it:
a href =http://nerds.airbnb.com/box-shadows-are-expensive-to-paint =noreferrer> http://nerds.airbnb.com/box-shadows-are-expensive- to-paint
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
有一组人最近对编程测试CSS性能感兴趣。这里有一个小书签，您可以用它来开始自己的测试：
There's a group of people recently gaining an interest in programmatically testing CSS performance. Here's a bookmarklet you can use to start your own testing:
在此期间，你是对的，黑客边框图像是一个选择。请在这里查看：
In the meantime, you're right that hacking border-image is an option. Check it out here:
这篇关于Chrome中非常慢的CSS3 box-shadows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！