Overflow hidden and input text scrolling in Google Chrome

Question

Here is my code snippet:

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

If i click and drag over the input text field, I get the div with overflow:hidden scrolling as it would

Answer 1

Here's what fixed it for me:

input:active { pointer-events:none; }

Thanks to https://stackoverflow.com/users/498031/vken for pointing this out over at this similar question: Issue with click-drag-select in text input field also scrolls parent element, webkit bug or feature?

UPDATE 2013-11: pointer-events:none fixes the issue but comes with numerous disadvantages. Best workaround for the issue is actually to make sure you have no overflowing content as in "the content of the overflow:hidden container is not bigger than said container. If you want to scroll content in via JavaScript, give it width&height=0 as long as it's hidden and resize it only right before moving it in (easily done with keyframe-animations or timed transitions)

IMPORTANT: I encountered a weird case with a customized field in Chrome which should not have caused any overflow-issues as I resized it via CSS - the dev-tools confirmed that, BUT: After taking a look at the Shadow-DOM I realized that Chrome's own "buttons" overflowed the actual input-field and therefore caused the entire container to be bigger.

How to show Shadow-DOM: If things look right and it still is an issue go to Chrome Dev-Tools, click on the Settings-Button in the lower right corner. On the "General"-tab in section "Elements" is the option to enable "Show Shadow DOM". This will give you the entire picture of what's going on... Though most of the time it just adds another layer of complexity, here it's really helpful!