CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?

Question

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

Answer 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.