CSS3 box-shadow 在 Safari 5.0.2 上导致滚动滞后（性能缓慢）？
嘿，
这次我遇到了一个非常罕见的问题，仅在 Safari 5.0.2 中出现。当使用 CSS3 的 box-shadow 参数时，Safari 的性能非常糟糕，您甚至无法正常向下滚动或按预期与网站交互。
我有一个 ，其平均大小（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 */
我尝试设置 CSS3 框 - Shadow 与 jQuery (.css()) 但结果是相同的（滞后）。哦，边界半径不会导致这种情况（我已经通过多次测试将其丢弃）。
那么，有没有办法解决这个问题呢？老实说，令我震惊的是像 Safari 这样的 WebKit 浏览器甚至会出现此类问题。我知道一定有办法，因为有几个网站使用 inset&outset 阴影并且在 Safari 中运行得很好。我在 StackOverflow 中找到了一篇文章，其中提到了框图像作为解决方案。但是，该文章已经很旧了。
我真的非常感谢您的时间和给予的任何支持。
提前非常感谢！
克里斯
Hey there,
this time I have a quite rare issue that's occurring only in Safari 5.0.2. When using CSS3's box-shadow parameter, Safari's performance is that bad, you can't even scroll down properly or interact as expected with the site.
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 */
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).
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是一个已知问题。关注WebKit bug 跟踪器中的问题 22102（“
-webkit-box -shadow会导致糟糕的滚动/调整大小/重绘性能”），以便在修复后收到通知。请注意，示例中的框阴影具有非常大的半径，这使得情况变得更糟。这就解释了为什么它似乎在其他网站上也能工作——它们只是使用较小的半径。
This is a known issue. Follow issue 22102 in the WebKit bug tracker (“
-webkit-box-shadowcauses awful scroll/resize/redraw performance”) to get notified when it’s fixed.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.
你为什么感到震惊？ Webkit 实现新东西的速度可能很快，但大多数时候它都是以极其错误的方式实现的。
不管怎样，看起来你正在尝试用盒子阴影伪造渐变。最好考虑使用 CSS3 渐变（Moz 语法 | Webkit 语法 | Opera 支持即将推出，并将遵循带有 -o- 前缀的 moz 语法）或图像背景。
此外，没有 box-image CSS 属性。它们可能意味着 border-image。
Why are you shocked? Webkit might be fast in implementing new stuff, but it does so in extremely buggy ways most of the time.
Anyway, it looks like you're trying to fake a gradient with box-shadow. Better consider using a CSS3 gradient (Moz syntax | Webkit syntax | Opera support coming soon and will follow the moz syntax with an -o- prefix) or an image background.
Also, there is no box-image CSS property. They might have meant border-image.