Touchmove pointer-events: none CSS doesn't work on Chrome for Android 4.4 / ChromeView

Question

I'm using CSS pointer-events to pass touchmove events through a transparent div. This works everywhere apart from Chrome on Android. I'm wondering if this is a known issue with Chrome and if there's any fixes / workarounds.

This issue also affects ChromeView, used by Cordova on Android 4.4. Cordova on earlier versions of Android (and iOS) works fine. However, Chrome on earlier versions of Android will still fail.

I have an app that uses layered divs, which I use with CSS:

pointer-events: none

so I can scroll or click the lower div.

 ____________________
| top overlay div    |
|    _____________   |<-- pointer-events: none
|   | underneath  |  |
|   |   div is    |  |
|   | scrollable. |  |
|   |_____________|  |
|____________________|

On non-ChromeView browsers, the underneath div is scrollable.

On ChromeView browsers (Chrome, Cordova on Android 4.4), the underneath div isn't scrollable. This is what I need to solve.

There's an example of this here:

http://jsfiddle.net/TPkum/ or http://pmdx.me/scroll.html

Note the lower div is scrollable, made possible by 'pointer-events: none'.

It works fine on most devices (iOS 6-7, Android 4.1-4.2, Chrome Windows/Mac), but fails on my Cordova app on Android 4.4 and Chrome itself (for earlier versions of Android).

I've tried re-dispatching touchmove events between the top div and bottom div, but that doesn't seem to work either. If I re-dispatch click/scroll events it's fine, just not touchmove.

Answer 1

I solved this using the solution here: https://stackoverflow.com/a/20387287/1876899

Thank you very much user wulftone! Somehow preventing the default touchStart event on my overlay allowed the interaction to pass through and trigger the events below.

overlay.addEventListener('touchstart', function(e){
  e.preventDefault();
});

or in my case, with jQuery:

$('.frame-overlay').on('touchstart', function(e){
  e.preventDefault();
});

Answer 2

Apparently there is a separate CSS property called touch-action:

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Add touch-action: none; and it should work.