CSS3 box-shadow导致Safari 5.0.2上的滚动延迟(性能下降)？

Question

嘿那里,
这次我有一个非常罕见的问题,只在Safari 5.0.2中发生.使用CSS3的box-shadow参数时,Safari的性能很差,甚至无法正常向下滚动或与网站按预期进行交互.

我有一个<div class="blox"></div>平均大小(960x320像素),这些是相关的CSS设置:

        -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(.css())设置CSS3 box-shadow,但结果是相同的(滞后).哦,边界半径不会导致这种情况(我通过多次测试将其丢弃).

那么,有什么解决方案吗？老实说,我很震惊,像Safari这样的WebKit浏览器甚至会出现这些问题.我知道必须有一种方法,因为几个网站使用插入和开始阴影并在Safari中运行得很好.我在StackOverflow中发现了一个帖子,其中提到了盒子图像作为解决方案..然而,这篇文章很老了.

我真的非常感谢你的时间和任何支持.
非常感谢你提前!

克里斯

Answer 1

这是一个已知的问题.按照WebKit错误跟踪器中的问题22102(" -webkit-box-shadow导致糟糕的滚动/调整大小/重绘性能")在修复时得到通知.

请注意,示例中的框阴影具有非常大的半径,这使得情况变得更糟.这解释了为什么它似乎可以在其他网站上工作 - 它们只是使用更小的半径.