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 in

Answer 1

While it might be frustrating to hear, that's not a bug, it really is a feature. If there's a scrollbar/scrollable area, and the area is activated and an arrow or other input device is firing, the area will scroll.

To counteract this you could try to fight each possible user input (touchpad scrolling, arrow keys, highlight-and-drag) with javascript, but the best answer for you is to rethink how you're using CSS here. Try using width:auto instead of width:100%, for instance.

To demonstrate (update):

CSS:

#parent { width:50px; height:20px;overflow:hidden; }
#overflow { width:50px;height:50px;overflow:auto; }

HTML:

    
blahaahhahahahahahahahahahahaaaaaaaaaaahahahahahaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhahhaahahaha

Jack the height on #parent up to 50px and you see the scrollbar still--soo it's just covered up; the content isn't hidden irretrievably. Set overflow:hidden on #overflow, and no scroll bars.