For my project, I am utilizing CSS pointer-events to allow touchmove events to pass through a transparent div. This method has been effective on most platforms except for Chrome on Android. I am curious if this is a known issue with Chrome and if there are any potential solutions or workarounds available.
This compatibility issue also extends to ChromeView, which is utilized by Cordova on Android 4.4. While earlier versions of Cordova (and iOS) do not experience the problem, Chrome on older versions of Android still presents challenges.
In my application, I have implemented layered divs using the following CSS:
pointer-events: none
This configuration allows me to scroll or click on the lower div within the layout.
____________________
| top overlay div |
| _____________ |<-- pointer-events: none
| | underneath | |
| | div is | |
| | scrollable. | |
| |_____________| |
|____________________|
In browsers other than ChromeView, the underneath div remains scrollable as intended.
However, in ChromeView browsers (such as Chrome and Cordova on Android 4.4), the underneath div becomes unscrollable. This is the issue that needs to be addressed.
You can view an example of this behavior here:
Notice how the lower div is scrollable thanks to 'pointer-events: none'.
While this technique functions correctly on most devices (iOS 6-7, Android 4.1-4.2, Chrome Windows/Mac), it encounters failures on my Cordova app running on Android 4.4 and previous versions of Chrome for Android.
I have attempted to re-dispatch touchmove events between the top and bottom divs, but this approach did not resolve the issue. Re-dispatching click or scroll events works fine, but not touchmove events.