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

这是一个已知问题。关注issue 22102 in the WebKit bug tracker（“-webkit-box-shadow会导致糟糕的滚动/调整大小/重绘效果”）以便在修复后得到通知。

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

Answer 2

你为什么感到震惊？ Webkit可能会快速实现新的东西，但它在大多数情况下以极其错误的方式实现。

无论如何，看起来你正试图伪造一个带阴影的渐变。最好考虑使用CSS3渐变（Moz syntax | Webkit syntax | Opera即将支持，并将使用带有-o-前缀的moz语法）或图像背景。

此外，没有box-image CSS属性。他们可能意味着border-image。

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

2 个答案: