9

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

cr0z3r
  • 711
  • 4
  • 9
  • 24

2 Answers2

13

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.

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
  • Thank you, I had no idea there was such a 'known' issue. Either way, are you aware of any work-around? Lowering the radius is not an option :( – cr0z3r Jan 25 '11 at 16:55
1

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.

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
  • Hey there. Well, as a primarily FF user I started admiring Webkit for its support capabilities (considering HTML5 and CSS3). Chrome for instance, works just fine. Oh and, indeed, I got mixed up with the word box; it's actually border-image. – cr0z3r Jan 27 '11 at 16:55