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/