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).

Literatim

Just encountered the same issue; no idea if this is gonna help but I'm gonna play with onmousewheel/move etc events and preventDefault(). Will report back if I find something useful. – Dionysiac

#6920774 – Equate

Answer 1

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

Dupe question: https://mcmap.net/q/1018073/-overflow-hidden-and-input-text-scrolling-in-google-chrome

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

Harlie

That's a very interesting hack! I've manage to use CSS #tx:active{pointer-events:none} to replicate the javascript behavior. Users are still able to select the value within the input box, but input box can't detect the onclick event. Maybe javascript way is the only way out here. – Literatim

@Literatim That's incredible :) Thanks for sharing. Works like a charm. The mousedown event still fires, btw. – Harlie

Answer 2

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

Dionysiac

Hi Philip, thanks for taking the time to figure out. As my webpage is already heavy with javascript, I was wondering if there are any CSS ways to deal with it. For example, webkit have textarea resizable by default, but you can disable by setting resize:none . – Literatim

@VKen: unfortunately I haven't found a pure CSS solution, and since this is really obscure webkit behavior I'm not sure there is one. However, I don't think that the onscroll listener will slow down your site considerably, it's triggered only when you try to select & drag after all. If you're worried about size, it's about 3-4 lines of pure js (no frameworks needed). – Dionysiac

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.

Survive

Interesting, thanks for pointing that out. Unfortunately, the overflow:hidden is needed as a masking-technique to hide elements so it has to stay. – Literatim

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

Ulema

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.

Bula

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.

Allyce