CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?
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
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.