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

Set scrollLeft and/or scrollTop to 0 in the "onscroll" event, this will disable scrolling:

var div = $(".overflow-hidden");
div.scroll(function() { div.scrollTop(0).scrollLeft(0); });

Answer 2

Here's what fixed it for me:

input:active { pointer-events:none; }

Thanks to https://stackoverflow.com/users/498031/vken for pointing this out over at this similar question: Issue with click-drag-select in text input field also scrolls parent element, webkit bug or feature?

UPDATE 2013-11: pointer-events:none fixes the issue but comes with numerous disadvantages. Best workaround for the issue is actually to make sure you have no overflowing content as in "the content of the overflow:hidden container is not bigger than said container. If you want to scroll content in via JavaScript, give it width&height=0 as long as it's hidden and resize it only right before moving it in (easily done with keyframe-animations or timed transitions)

IMPORTANT: I encountered a weird case with a customized <input type=file> field in Chrome which should not have caused any overflow-issues as I resized it via CSS - the dev-tools confirmed that, BUT: After taking a look at the Shadow-DOM I realized that Chrome's own "buttons" overflowed the actual input-field and therefore caused the entire container to be bigger.

How to show Shadow-DOM: If things look right and it still is an issue go to Chrome Dev-Tools, click on the Settings-Button in the lower right corner. On the "General"-tab in section "Elements" is the option to enable "Show Shadow DOM". This will give you the entire picture of what's going on... Though most of the time it just adds another layer of complexity, here it's really helpful!

Answer 3

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.

Answer 4

I ran into this, too. So far, the thing I've gotten to work the best is using pointer-events:none;. The only way I could get it to be applied was to set the display: none;. Otherwise it was ignored, so there's a brief blink.

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

var tx = document.getElementById('tx'),
    bod = document.body;

tx.addEventListener('mousedown', tx_ondown);

function tx_ondown() {
    bod.addEventListener('mousemove', b_onmove);
    bod.addEventListener('mouseup', b_onup);  
    bod.addEventListener('mouseout', b_onup);    
}

function b_onmove() {
    tx.style.pointerEvents = 'none';
    tx.style.display = 'none';

    setTimeout(function() {
        tx.style.display = '';
    }, 0);
    bod.removeEventListener('mousemove', b_onmove);
}

function b_onup() {
    if (tx.style.pointerEvents === 'none') {
        tx.style.pointerEvents = '';
    } else {
        bod.removeEventListener('mousemove', b_onmove);
    }
    bod.removeEventListener('mouseup', b_onup);
    bod.removeEventListener('mouseout', b_onup);        
}​