Extremely slow site when using box-shadows, but just on Mac?

I have an internal web app where they can create city council agendas. Theyve been doing it in MS Word and printing it out for ages. I wanted to make the "live preview" of what the printed page would look like paper. I did this all my Linux box. Everything was dandy. Tested in IE7-8, Opera, Chrome, and Firefox. All had a paper look and fe开发者_运维问答el and worked great.

But sadly, i checked it on my Mac box and for whatever reason, it's so slow it's almost not even useable in Chrome and FF. It's extremely choppy etc. I couldn't figure it out then i removed just these lines:

-moz-box-shadow:#000 0 0 10px,inset #999 0 0 50px;
-webkit-box-shadow:#000 0 0 10px,inset #999 0 0 75px;

and everything is blazing fast and silky smooth again.

So, any ideas why or how to fix other than an OS sniff and removal of the CSS attributes?

---

A few points:

• As mentioned in the question that weltraumpirat pointed out, -moz-border-image is one possible alternative.

• Have you tried using only one box shadow, instead of multiple? If your design can do without one of them, this will cut down a bit on scroll lag.

• Especially since this is an internal web app, keep your target audience in mind. If everyone using the app runs on a city-issued Windows workstation for example, you don't have to worry about Mac rendering performance. (I realize that this may be painfully obvious, but it's worth pointing out anyway.)