I have a fixed position popup window on a web application. It has overflow-y: scroll set. A problem recently came up in Android Chrome (or I never noticed it before). When I fling scroll and hit the bottom or top of the popup's overflow, touch gets deactivated. If you tap something once, nothing happens, but it seems to bring focus to the popup again, and your second tap will work. I made a pen to demonstrate this:
http://codepen.io/arickle/full/PNWJwy
Relevant code?
.popup {
position: fixed;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
max-width: 400px;
background-color: #DDD;
border-radius: 3px;
box-sizing: border-box;
padding: 20px;
overflow-y: scroll;
margin: 0 auto;
transition: opacity 0.08s linear;
}
Open it on an Android device with a recently updated Chrome. Open the popup. Fling scroll to the bottom, and try to tap a button. Your first tap will not work. Your second tap should.
EDIT: More information. If you fling scroll to the bottom/top, and wait approximately 2 seconds, your first tap will work. If you fling scroll, hit the edge, and tap within 2 seconds of hitting the edge, it will not work.
Is this known? Any explanation for this behavior? It's unacceptable for the user experience I'm targeting, and I'd like to get around it. I'm assuming I'll need some kind of workaround. I can't imagine this is intentional behavior on the Chrome team's behalf.