Android元素选择问题

Question

I'm attempting to make my website tablet friendly and I'm facing a strange issue.

I am testing on an Android 4.0 tablet with Chrome 30.

I have a fixed modal popover screen. While this screen is on, we don't want to let the user scroll the background so touch events are prevented. However, in this window we have a scrollable area with overflow:scroll , therefore the touch event is not prevented if the touch start event is detected there. So far so good - Android responsibly scrolls the area as expected.

Problem is, if the user long-presses an element inside the scroll area for about half a second, and only then scrolls - the element where the touch started appears to be selected for a moment. That selection disappears after a bit. But, in case the user scrolls during that bit - the whole page scrolls instead of the scrollable area. It's as if the focus is changed. What's going on?

I tried to set CSS selection rules on the elements inside but it didn't help.

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

Every other answer suggests to prevent the touch event which I can't because it's meant to be scrolled. Any ideas what's causing this?

Answer 1

OK, I got it.

Add cursor:default!important to the above CSS rules.

I DID come across such a solution but it failed on first try. In my case, the specificity of elements inside the scrollable area was too strong, rendering cursor:default useless and I didn't realize it. I apply this only to mobile devices by detecting the useragent, therefore I can afford dismissing the previous cursor attribute with !important as it won't affect any desktop clients. Sweet!

Still not sure why this worked. If anyone could supply information on how the cursor attribute affects Chrome on Android I will be grateful.