CSS3 box-shadow causes scroll-lag (slow performanc

问题:

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

回答1:

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.

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.

回答2:

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.