Scroll Lag with CSS3 box-shadow property?

Question

I added a box-shadow to a section of a page recently to give it the same shadow border effect that is seen on Mac OS X apps. It looked great, but I noticed that

Answer 1

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.

Answer 2

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.

Answer 3

The issue still persists in Chrome for Android as of the current date. Some box-shadow combos result in a poor scrolling performance. In my case stacking two inset box-shadows (e.g. top / bottom) lead to the described problem. The only solution I can provide is to make the box-shadows less complex and try again...that worked for me. That's unsatisfactory but yeah instead u can also use the border-image solution or remove the affected box-shadow completely. Hope this gets fixed soon, finally. Btw the Android Version of Firefox does not have the problems anymore (for my css3). Moreover the desktop versions of both browsers are not affected in my case.

Answer 4

#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}

Cross browser version for old and new browser. Simple img: http://i28.tinypic.com/2njzkt1.png

style :fixed for images too overload perfomance browser