Touchmove pointer-events: none CSS doesn't work on Chrome for Android 4.4 / ChromeView
cordova, css, google-chrome, html
Solution
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();
});
Problem
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.