Chrome中非常慢的CSS3框阴影 [英] extremely slow CSS3 box-shadows in Chrome
问题描述
我一直在开发一个专门用于现代浏览器的应用，并且非常大量地使用了box-shadow属性。
直到最近，所有支持的浏览器。但是大约一个月前，我在Chrome中测试时发现，滚动极其缓慢，几乎无法使用。
过去一个月我尝试过/ script> /
使用box-shadow / webkit-box-shadow禁用所有的元素，我已经设置，问题消失。
什么打击我奇怪的是，它工作正常在Chrome直到一个多月前。顺便说一下，Safari版本的safari的滚动是很好，虽然比IE / Opera和Firefox慢一些。
这是一个已知的问题吗？有没有人有一个解决方法？
最重要的是，是否有另一种方法来复制相同的效果而不使用CSS3属性？
去年在Webkit中打开和关闭了一个错误报告：
CSS3 box-shadow导致Safari 5.0.2上的滚动滞后（慢性能）？
似乎Chrome在旧版本上有一个开放的错误：
http://code.google.com/p/chromium/issues/detail?id=95164 p>
Airbnb最近讨论了这个问题，因为它改变了他们的最终设计：
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
有一组人最近对编程测试CSS性能感兴趣。以下是一个小书签，您可以用它来开始自己的测试：
http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
在此期间，您正确的是，黑客边界图像是一个选项。请在这里查看：
Scroll Lag with CSS3 box-shadow property？
I've been developing an app specifically for modern browsers and have made very heavy use of the box-shadow property.
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.
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.
With box-shadow / webkit-box-shadow disabled on all elements that I had it set for, the problem disappears.
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?
And most importantly, is there another method of replicating the same effect without using the CSS3 property?
There was a bug report opened and closed in Webkit last year:
CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?
It seems Chrome has an open bug on an older version:
http://code.google.com/p/chromium/issues/detail?id=95164
Airbnb discussed the problem recently, and actually changed their final design because of it:
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
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:
http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
In the meantime, you're right that hacking border-image is an option. Check it out here:
Scroll Lag with CSS3 box-shadow property?
这篇关于Chrome中非常慢的CSS3框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
