Disable overflow scrolling on webkit-based browsers - css

Question

I'm using ::after to create shadow to decorate a element (say A).
In order to do this, I set the overflow: hidden for A to hide undesired part of the shadow.
It looks perfect, but there is a problem after I added a input box to A. If I click in the input and drag, the A layer will scroll, and the rest part of shadow will show up.
Here is the demo and the simplified code:
<div style="width: 200px; height: 30px; overflow: hidden; border: 1px black dotted;">
<div style="height: 30px; border-bottom: red 10px solid;">
<input style="width: 200px" placeholder="click and drag me downward" />
</div>
</div>
I'm looking for a pure CSS solution to fix this problem. Thanks ahead.

Answer 1

This isn't an ideal solution, but I don't think a pure CSS solution exists to this problem (unfortunately), it makes me wonder whether this has been logged as a bug with the Chrome team.
jQuery should be as follows:
$('input').on('mousedown', function(e){
$(e.target).focus();
e.preventDefault();
});
(I know I shouldn't assume you're using jQuery, if needed I can provide you a pure JS solution, it'll just be more complicated).
Fiddle: http://jsfiddle.net/jzb5a/
EDIT: Apparently this is a known bug (https://bugs.webkit.org/show_bug.cgi?id=114384) it's dissapointing that four months on there still hasn't been a fix though.

Answer 2

Finally come to an solution, which is not that perfect but fixed the problem anyway.
As the background overflows, and the input on the same layer would cause the problem. So just move the input to another layer which doesn't overflow. demo
<div style="position: relative; width: 200px; height: 30px; border: 1px black dotted;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden;">
<div style="height: 30px; border-bottom: red 10px solid;"></div>
</div>
<input style="width: 160px" placeholder="click and drag me downward" />
</div>