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