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 do with overflow:auto. If I set overflow:hidden on a div, I want the scrolling to be locked as other browsers do.

The curious thing is that if I set padding:0px on the input field, the issue on Chrome does not occur anymore.

Is it a Google Chrome bug? Any workaround to make it work without the use of Javascript?

EDIT: This behaviour happens on Safari 5 too. Maybe it is a Webkit issue.

Mehta

Same issue here, except that the workaround doesn't work for me. :-( – Acetylcholine

Answer 1

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!

Antebellum

Unfortunately, the user can no longer scroll down by highlighting with the mouse with this solution. Plus, it has other implications when it comes to listening for events in JS. Please see my answer for a more robust solution. – Salt

it has it's disadvantages - i give you that! though your example is a little off-topic as it does not include an INPUT field – Jostle

@JohnKurlak I updated my post with my newest conclusions ;-) – Jostle

@JörnBerkefeld So sorry! I thought I was posting to a different thread. My mistake. – Salt

Answer 2

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);        
}​

Houseleek

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.

Educable

Answer 4

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); });

Seidule