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

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

Answer 2

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.