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

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

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

У меня есть приложение, которое использует слоистые divs, которые я использую с 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 p >

Обратите внимание, что нижний div является прокручиваемым, что стало возможным благодаря "указателям-событиям: none".

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

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

Любые советы будут очень признательны! Спасибо.

Ответ 1

Я решил это с помощью решения здесь: fooobar.com/info/448629/...

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

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

или в моем случае с jQuery:

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