Overflow hidden, but still able to scroll (only Chrome)

Question

I have a very strange CSS "bug".

I'm currently working on an slider thing (slides have form elements on them). When I click & drag (to the right to scroll horizontal) on an label within the slide, then the container scrolls and the next slide comes visible while the property overflow: hidden; is set on the container.

I found out that the overflow property works normal when there is NO label tag present.

Does anyone has a solution herefor? I tried a lot of CSS stuff but no success. I recreated the bug in JsFiddle here: clicky

Update

• The click & drag bug thing appears only in Chrome. (I tested IE and FF)
• Plus, it's NOT about the scroll bar of the ul list with the labels, but about the fact that you can click on an label and drag it to the right to scroll to the next slide.

Answer 1

This is a known bug in Chromium (Google chrome is based on this) see: http://code.google.com/p/chromium/issues/detail?id=116655

Because both Safari and Chrome appear to show the issue I would hazard a guess that this bug is general to all webkit based browsers.

Unfortunately there has been no response from the Chromium development. I suggest you vote for this issue on the link provided to help see it resolved in future revisions.

Answer 2

Here is a workaround using jQuery.

$(your_slider).scroll(function(){
    if($(this).scrollTop() != 0 ){
        $(this).scrollTop(0)
    }
});

If you are scrolling horizontally then replace scrollTop with scrollLeft