Touchmove Zeiger-Ereignisse: keine CSS funktioniert nicht in Chrome für Android 4.4/ChromeView

Question

Ich verwende CSS-Zeiger-Ereignisse, um Touchmove-Ereignisse durch ein transparentes div zu übergeben. Dies funktioniert überall abgesehen von Chrome auf Android. Ich frage mich, ob dies ein bekanntes Problem mit Chrome ist und ob es Fixes/Workarounds gibt.

Dieses Problem betrifft auch ChromeView, das von Cordova auf Android 4.4 verwendet wird. Cordova auf früheren Versionen von Android (und iOS) funktioniert gut. Allerdings schlägt Chrome in früheren Versionen von Android weiterhin fehl.

Ich habe eine Anwendung, die geschichtete divs verwendet, die ich mit CSS:

pointer-events: none 

so kann ich scrollen oder die untere div klicken.

In Nicht-ChromeView-Browsern ist das darunterliegende div scrollbar.

In ChromeView-Browsern (Chrome, Cordova unter Android 4.4) ist das darunterliegende div nicht scrollbar. Das muss ich lösen.

Es ist ein Beispiel für diese hier:

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

Beachten Sie die untere div scrollbaren ist, ermöglicht durch 'Zeiger-Ereignisse: none'.

Es funktioniert gut auf den meisten Geräten (iOS 6-7, Android 4.1-4.2, Chrome Windows/Mac), aber scheitert an meiner Cordova App auf Android 4.4 und Chrome selbst (für frühere Versionen von Android).

Ich habe versucht, touchmove Ereignisse zwischen dem oberen Div und unteren Div erneut zu versenden, aber das scheint auch nicht zu funktionieren. Wenn ich Click/Scroll-Ereignisse erneut absende, ist es in Ordnung, einfach nicht berühren.

Answer 1

Ich löste dies die Lösung hier mit: https://stackoverflow.com/a/20387287/1876899

Vielen Dank Benutzer wulftone! Irgendwie verhinderte das standardmäßige touchStart-Ereignis in meinem Overlay, dass die Interaktion durchging und die folgenden Ereignisse auslöst.

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

oder in meinem Fall, mit jQuery:

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

Answer 2

Anscheinend gibt es eine separate CSS-Eigenschaft touch-action genannt:

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

touch-action: none; hinzufügen und es sollte funktionieren.