CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?
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.<br>
Thank you so much in advance!

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

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.<br>
Thank you so much in advance!

Chris