Overflow hidden and input text scrolling in Google Chrome

Question

Here is my code snippet:

http://jsfiddle.net/7CuBV/6/

If i click and drag over the input text field, I get the div with overflow:hidden scrolling as it would

Answer 1

I tried tiffon's solution using JQuery but couldn't get it to work with multiple fields, mouseup wouldn't fire after I had set pointer-events to none.

So, setting the input 'pointer-events' to none solves the problem of scrolling into hidden content, but it prevents the user from focusing the field using mouse events. But I noticed that clicking the label would still work to focus the field.

So I made this workaround that works cause all my fields are nested inside div's. Basically clicking the field doesn't focus it but still bubbles the event to it's parent:

    $('label').click(function(e){
    e.stopPropagation();
});
$('input[type="text"], textarea').parent().click(function(){
    $(this).find('label').click();
});
$('input[type="text"], textarea').on({
    mousedown:function(){
        $(this).css('pointer-events', 'none');                  
    }
});

Problem is it doesn't let you select the text inside the field unless you use the keyboard arrow keys.