CSS3 box-shadow导致Safari 5.0.2上的滚动滞后（慢性能）？ [英] CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?

问题描述

在那里，

这一次我有一个非常罕见的问题，只发生在Safari 5.0.2。当使用CSS3的box-shadow参数时， Safari的性能很差，您甚至无法正常向下滚动或与网站的交互。

我有一个具有平均大小（960x320像素）的< div class =blox>< / div> ，这些都是相关的CSS设置：

I have a <div class="blox"></div> which has an average size (960x320 pixels), and these are its relevant CSS settings:

        -moz-border-radius: 4px; /* FF1+ */
    -webkit-border-radius: 4px; /* Saf3-4 */
    border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome */
    -moz-box-shadow: inset 0px 0px 140px #dfe1e2; /* FF3.5+ */
    -webkit-box-shadow: inset 0px 0px 140px #dfe1e2; /* Saf3.0+, Chrome */
    box-shadow: inset 0px 0px 140px #dfe1e2; /* Opera 10.5, IE9 */

我尝试用jQuery设置CSS3 box-shadow （）），但结果是相同的（滞后）。哦，和border-radius不会导致这个（我已经通过测试它几次抛弃它）。

I tried setting the CSS3 box-shadow with jQuery (.css()) but the outcome was the same (lag). Oh and, the border-radius does not cause this (I've discarded it by testing it several times).

那么，有没有任何解决方案？老实说，我很震惊，Safari等WebKit浏览器甚至提出了这些问题。我知道必须有一种方式，因为几个网站使用插入和开始阴影和运行只是在Safari。我在StackOverflow中发现了一个帖子，其中提到盒子图像作为解决方案..然而，那个帖子是很老了。

So, is there any solution to this? Honestly, I am shocked that a WebKit browser such as Safari even presents these sorts of issues. I know there must be a way, since several websites use inset&outset shadows and run just fine in Safari. I found a post here in StackOverflow which mentioned the box-image as a solution.. however, that post was quite old.

我真的很感激你的时间和任何支持。

提前多谢！

I really, really appreciate your time and any support given.
Thank you so much in advance!

Chris

推荐答案

这是一个已知的问题。按照问题22102在WebKit错误跟踪器（ -

This is a known issue. Follow issue 22102 in the WebKit bug tracker ("-webkit-box-shadow causes awful scroll/resize/redraw performance") to get notified when it’s fixed.

请注意，box的阴影是一个非常重要的元素，你的例子有一个非常大的半径，这使得更糟。这解释了为什么它似乎在其他网站上工作 - 他们只是使用较小的半径。

Note that the box shadow in your example has a very large radius, which makes it worse. This explains why it might seem to work on other sites — they’re just using smaller radii.

这篇关于CSS3 box-shadow导致Safari 5.0.2上的滚动滞后（慢性能）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！