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 scrolling up and down on the page made it lag. I usually only see this on pages that have annoying background images and tons of images and embedded videos plastered all over (cough MySpace cough). I originally decided to use box-shadow since I figured that it would remove the need to use an image, which would remove any possibility of scroll lag.

I know that CSS3 is still new, but is this the reason for the lag? Is the shadow being software rendered or something? When I apply the box shadow to smaller elements, it doesn't lag at all. I'm just wondering if anyone else has experienced this.

I just tried it on the Stack Overflow front page, on the #content div using Firebug with a setting of:

-moz-box-shadow: 1px 1px 10px;

And I did notice some scroll lag afterwards. I am using Firefox 3.5.

My question is, what are some alternatives to using this attribute if I want to add a Mac OS X style border to a section of my page?

On a side note, does anyone know if it is possible to apply the box shadow only to the top, left, and right sides of the element and not the bottom? I tried 1px -1px 10px but it still shows the shadow on the bottom. If I keep decreasing the second offset, it eventually removes the shadow from the bottom but then the top shadow is now way darker and bigger.

And yes, I have seen the articles on box-shadow at:

• CSS3 Info
• fredericiana's blog

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