Bug 114384 – Overflow hidden doesn't prevent mouse drag from input field towards oveflowed content

• Status: UNCONFIRMED
• Component: Layout and Rendering

[Eyal Gersht]

When creating a container with overflow:hidden, and overflowing content - the overflowed content is indeed hidden.

However, if the container contains an input field, dragging the mouse pointer from the input field towards the overflowed content allows the drag to take place, sliding the visible window within the container.

This is not the behaviour when dragging fro any "normal" text within the container, where overflow:hidden prevents the drag to exit the container's borders.
Nor is this the behaviour in firefox, where dragging from the nested input doesn't allow the drag to exit the visible window's borders.

I've created a codepen.io live example that explains it better at http://codepen.io/gersht/details/ayHxb .

Also reproduced on Safari.

---

This was also submitted by me as a bug to chrome, using chrome's "Submit an issue" feature.

[Sagie Maoz]

Confirming this is reproducible on Chrome:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

As well as on Safari:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/536.28.10 (KHTML, like Gecko) Version/6.0.3 Safari/536.28.10

I was *not* able to reproduce this on Mobile Safari:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25

To reproduce, make sure the dragging event start from within the input field (and drag to the right).

[Scott Wilson]

Confirmed on Chrome 28.0.1500.71 OS X 10.6.8. Confirmed by a tester on my team on Windows Chrome, but I don't have the version handy.

[Drew Foehn]

Confirmed 

This is happening on safari nightly. Version 6.0.5 (7536.30.1, 538+)

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/538.1+ (KHTML, like Gecko) Version/6.0.5 Safari/536.30.1

Only way to work around this issue is to assign an event listener to the scroll event on the overflow hidden element and set it's scrollTop and scrollLeft to 0. This especially severe as if there is content there, the user has no way of scrolling the content back into view.

[Drew Foehn]

The following SO users are also experiencing this:

http://stackoverflow.com/questions/10036044/issue-with-click-drag-select-in-text-input-field-also-scrolls-parent-element-we?rq=1

http://stackoverflow.com/questions/10847235/undesired-scroll-when-drag-inputs-on-webkit-browsers

[Robert Rodriguez]

Here is a link to a JSFiddle sample:
http://jsfiddle.net/H6PaC/53/

[Eyal Gersht]

I'd like to point out again that the original bug reported was submitted with this codepen.io live example http://codepen.io/gersht/details/ayHxb

[Santiago Aguiar]

I can reproduce this behavior without needing an input field, with a very simple scenario: a DIV with overflow-x: hidden with a child DIVcontent that exceeds the parent size, as long as overflow-y is visible. Click on the scrollable area and drag to the right:

http://codepen.io/anon/pen/CsoJb

This might be a completely different issue, but seems related.

Using chrome 33.0.1726.0 dev. Can be reproduced on 31.0.1650.57 too. This is also happening on old versions of Safari (5.1.7) so it seems like an old bug.

Both Firefox and IE do not scroll the content.