2

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 feel 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?

Oscar Godson
  • 31,662
  • 41
  • 121
  • 201

1 Answers1

1

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

Community
  • 1
  • 1
peterjmag
  • 6,041
  • 1
  • 30
  • 27
  • Yeah, with one shadow it's still just awful. It's internal right now, but we want to push the same UI to the public (without any write privs, obviously) so thats why all of a sudden i was trying to fix this. Yes, before I just left it because i was like "I love you OS X, but if you can render a shadow you dont deserve support", now i gotta tho :\ – Oscar Godson Jan 07 '11 at 20:08