Firefox & CSS3: using overflow: hidden and box-shadow

Question

I'm not sure whether this bug applies to Firefox only or also to WebKit-based browsers, but it's really, really annoying.

I've got a template/framework for my CMS interface, using box-shadow on a few elements with a width of 100%. Since this causes shadow on the right side of the element, a scroll bar appears. To hide the ugly scrollbar, I set "overflow: hidden" on the body element and on the wrapper div.

This causes some strange behaviour. Though there aren't any scrollbars, the page still scrolls to the right when I scroll using my touchpad (horizontal scroll). I've tried a hell of a lot and googled my ass off, but I can't seem to find a solution for this..

Anyone know a problem solver? or is this just an example of conflicting implementation of css3 box-shadow?

Answer 1

I just had this issue with a design I was working on. Basically, Firefox creates a scrollable area for any shadow that extends past the right edge of the page. For whatever reason, Firefox doesn't create scrollable area if the shadow extends to the left. So my simple solution is to move the shadow completely to the left.

Problematic Code:

-moz-box-shadow: 5px 5px 5px #000;

Simple solution:

-moz-box-shadow: -5px 5px 5px #000;

I tried setting the x-offset to 0px, but since the blur is 5, there was still a scrollable area about 2-3px wide.

Answer 2

Since I'm dealing with the same annoying issue, I'll go ahead and chime in here to say that this is definitely a shitty feature (if indeed it should be referred to as a feature). To have a box shadow cause a scroll bar is useless, though I'd be happy to eat my words if someone could give me a really good reason that it should be like that.

I think the answer here is just rendering the page a little different and letting firefox users miss out on the box shadow. Easy enough if you just don't declare -moz-box-shadow.