Scroll Lag with CSS3 box-shadow property?

Your best bet would be to use -moz-border-image instead. That should solve both your issues.

E.g. you could use an image like this, , combined with CSS like this

-moz-border-image: url(shadow.png) 10 / 10px;

to create your shadow. And since you're using an image, you can leave out the bottom shadow as well, if you want.

---

You're not going to be able to remove the shadow from the bottom using -moz-box-shadow; it's not called "box shadow" for nothing. It applies a shadow to the entire box. You can't specify a shadow for each side separately like with border, say. The best you could do is fiddle around with the placement, blur and spread of the shadow. But that inevitably leads to a darker shadow on the opposite side.

I get the box shadow lag as well when I try it on Stackoverflow. It affects performance on Safari as well when I try -webkit-box-shadow, though it isn't as noticeable as in Firefox. The performance will hopefully improve in the future, but I presume the shadow will always have some impact since as far as I know it is software rendered.

This has been fixed in webkit as of two days ago. :)

https://bugs.webkit.org/show_bug.cgi?id=22102

You can pick up a chromium nightly to try it out.

I looked in FF3.6 and FF4 and don't see terrible scroll performance there, so it might be addressed there as well.