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, but I don't seem to be able to hit the keywords relating to this issue.

I have a html structure as below:

<div style="border: 1px solid #000; width:200px;height:200px; overflow:hidden;position:relative">
    <div style="width:200px;position:absolute">
        <p>long line</p>
        <p><input type="text" value=""/></p>
        <p>long line</p>
    </div>
</div>​

You can visit the live example in the jdfiddle link: jsfiddle

For me, using Chrome(18), when one clicks and drag-selects text in the text input field out of the input box, you are able to "scroll" the parent element, although the CSS overflow is set to hidden.

You can try it from the fiddle by click select-dragging right, top, bottom, left. Works wonders.

More complex html structure yields more bizzare scrolling behaviors. In fact, I can almost do a slide show animation with elements sliding in and sliding out in sequence, just by drag selecting.

This behavior isn't experienced in firefox, fortunately.

Is anyone experiencing this behavior as well? Is this supposed to be a feature of webkit? Does anyone knows how to disable this "scrolling" behavior?

Thanks!

edit: Thanks to @PhilipK, he has found a related post with a javascript solution answered below. As my webpage is heavy with javascript I would like to find out if there are there any possible CSS solutions.

edit2: Thanks to @tiffon, he found another javascript solution. His solution could be implemented in CSS (but with some limitations to mouse events, so the CSS solution is kind of incomplete).

Answer 1

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

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

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

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 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 4

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 5

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.

Answer 6

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.