[SOLVED] Pan Events issue with ionic WKWebView for iOS 13.2

Pan Events issue with ionic WKWebView for iOS 13.2

In my ionic-cordova application, I have drag and drop functionality where I use pan events to drag and drop and use this:

document.elementfrompoint(x,y)

returns empty object on latest iOS 13.2. After analyzing the the latest upgrade was only the WKWebView engine for iOS. When I downgraded and fall back to UIWebView by:

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

Observed that it returned a complete element object.

And in both the cases I tried passing same x and y co-ordinates.Still it is returning a empty object. Can anyone help me to resolve this issue?

Solution

Can you check if your pan events are getting triggered? In my application, I was facing this issue when pan events were not getting triggered on iOS 13 and when I tried to call document.elementfrompoint(x,y), was returning null.

For me, this was happening because pointer events are supported by iOS 13 and Hammer can not handle it properly. In this case, Hammer takes default input type as pointer events. I solved it by disabling pointer events support in Hammer. I disabled it only for iOS.

import { HammerGestureConfig } from "@angular/platform-browser";
import * as Hammer from 'hammerjs';

export class HammerConfiguration extends HammerGestureConfig {

   buildHammer(element: HTMLElement) {
    if ( navigator.userAgent.match(/iPad|iPhone|iPod/) ) {
      return new Hammer(element, {
        inputClass: Hammer.TouchMouseInput
      });
    } else {
      return new Hammer(element);
    }
}

You can also refer to https://github.com/hammerjs/hammer.js/issues/1084 https://github.com/ionic-team/ionic/issues/19594