8

嘿，
这一次我遇到了一个非常罕见的问题，它只在 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，但结果是相同的 (lag)。哦，边界半径不会导致这种情况（我已经通过多次测试将其丢弃）。

那么，有什么解决办法吗？老实说，我很震惊像 Safari 这样的 WebKit 浏览器甚至会出现这些问题。我知道一定有办法，因为有几个网站使用 inset&outset 阴影并且在 Safari 中运行得很好。我在 StackOverflow 中找到了一个帖子，其中提到了 box-image 作为解决方案。但是，那个帖子已经很老了。

我真的非常感谢您的时间和给予的任何支持。
非常感谢您！

克里斯

4

2 回答 2

13

这是一个已知的问题。关注WebKit 错误跟踪器中的问题 22102（“<code>-webkit-box-shadow 导致糟糕的滚动/调整大小/重绘性能”），以便在修复后得到通知。

请注意，您示例中的盒子阴影的半径非常大，这使得情况变得更糟。这就解释了为什么它似乎可以在其他网站上工作——他们只是使用更小的半径。

于 2011-01-25T14:32:16.353 回答
1

你为什么震惊？Webkit 在实现新东西方面可能很快，但大多数时候它以极其错误的方式这样做。

无论如何，看起来您正在尝试使用 box-shadow 来伪造渐变。最好考虑使用 CSS3 渐变（Moz 语法| Webkit 语法| Opera 支持即将推出，并将遵循带有 -o- 前缀的 moz 语法）或图像背景。

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

于 2011-01-26T06:14:50.833 回答