Touchmove pointer-events: нет CSS не работает в Chrome для Android 4.4/ChromeView

Question

Я использую CSS-указатели-события для передачи событий touchmove через прозрачный div. Это работает везде, кроме Chrome на Android. Мне интересно, если это известная проблема с Chrome, и есть ли какие-либо исправления/обходные пути.

Эта проблема также затрагивает ChromeView, используемый Cordova на Android 4.4. Кордова в более ранних версиях Android (и iOS) отлично работает. Тем не менее, Chrome на более ранних версиях Android все равно потерпит неудачу.

У меня есть приложение, которое использует слоистые дивы, которые я использую с помощью CSS:

pointer-events: none 

так что я могу прокручивать или нажмите нижний DIV.

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

В браузерах без ChromeView нижний div прокручивается.

В браузерах ChromeView (Chrome, Cordova на Android 4.4) нижний div не прокручивается. Это то, что мне нужно решить.

Там пример этого здесь:

http://jsfiddle.net/TPkum/ или http://pmdx.me/scroll.html

Примечание нижний ДИВ прокручивать, стало возможным благодаря «указатель событий: доли не имеет».

Он отлично работает на большинстве устройств (iOS 6-7, Android 4.1-4.2, Chrome Windows/Mac), но не работает в моем приложении Cordova на Android 4.4 и Chrome (для более ранних версий Android).

Я пробовал перераспределять события touchmove между верхним div и нижним div, но это тоже не работает. Если я повторно отправлю события щелчка/прокрутки, это нормально, просто не касайтесь.

Answer 1

Я решил это, используя решение здесь: https://stackoverflow.com/a/20387287/1876899

Большое спасибо пользователю wulftone! Как-то предотвращение события touchStart по умолчанию на моем наложении позволило взаимодействию пройти и вызвать события ниже.

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

или в моем случае, с JQuery:

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

Answer 2

Видимо есть отдельный CSS свойство называется touch-action:

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

Добавить touch-action: none; и он должен работать.