Issue with click-drag-select in text input field also scrolls parent element, webkit bug or feature?

Question

There\'s a weird behavior that I\'ve been experiencing with only the webkit browsers since last year, and it is driving me nuts.

I\'ve tried doing searches on this,

Answer 1

I found this problem too, after a bit of experimentation I removed an overflow:hidden from one of the parent divs (the very outer div which was scrolling), and it appears to have solved it. I wasn't using any iframes.

Answer 2

So this worked for me - see here - basically listen to the onscroll event and set both scrollTop and scrollLeft to 0.

Answer 3

I think abusing pointer-events: none; might be another option:

Dupe question: https://stackoverflow.com/a/13897395/1888292

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

Answer 4

The example linked to above gives the basic idea, but it's about an iframe and can be a little confusing to implement on a text input within a div, which is what I (and the original poster) were facing.

Here's what I ended up doing, using jquery;

$('body').on('select', '.my_text_input', function(e) {
        $('.div_that_was_moving_weirdly').scrollLeft(0);
         return false;
    });

This is still imperfect, as there will be a jarring scroll over and then jump back, since the select event doesn't seem to kick in until you're done selecting. I tried various events but this is the best I could do.

Answer 5

I know this an old thread, but I've just faced the same problem.

I created this fix:

// DISABLE INPUT DRAG SCROLL (CHROME BUG FIX)
var disableScrollDrag = false;
$('input, select, textarea').unbind('mousedown').mousedown(function(e) {
    disableScrollDrag = true;
    $(this).css('pointer-events', 'none').addClass('disable-scroll-drag');
});

$('body').mousemove(function() {
    if (disableScrollDrag === true) {
        $('.disable-scroll-drag').each(function () {
            $(this).css('pointer-events', 'auto');
        });
        disableScrollDrag = false;
    }
});

Answer 6

Just wrestled with this strange one for the first time. I found that if I set the width of the text field to something less-than-or-equal-to the container, the parent element didn't scroll in relation to the text input value.