~200ms Touch (Click) Delay in Cordova but not in Browser or PWA

user_4200076 0
Viewed 961

I am currently converting my web app to a Cordova app. And I ran into a strange problem:

In Safari or when adding my app to the home screen, all touch inputs (Clicks/Touch) are fast (no delay) but when deploying my app as a Cordova project the inputs (Clicks/Touch) are slow (about 200-300ms delay - no measurement just an estimate based on the well-known touch delay problem).

I am testing on an iPhone Xs running iOS 12.3 and I am building the app with Cordova 9.0.0.

The following viewport settings are used by the app:

<meta content="width=device-width, initial-scale=1, maximum-scale=1, height=device-height, viewport-fit=cover, user-scalable=no" name="viewport" />

Any help would be greatly appreciated.

progressive-web-apps webview cordova html
2 Answers

You need to replace your 'click' events with 'touchstart' events. You can detect if you are in a webview by doing 

  var click = 'click';

  if(typeof(window.ontouchstart) !== 'undefined'){
        click = 'touchstart';
  }

Then listen to you click event using the click variable. Using jQuery

  $('#something').on(click, function(event){...
user_7496570

TESTED AT: Chrome

It happens because there is something that expands body, some elements are bigger than a device width. Sooo the solution will be to show browser that we don't need his help, you can handle it by yourself:

html,
body {
  width: 100vw;
  overflow-x: hidden;
}

Finally you got something like this:

@media screen and (max-width: 600px) {
  html,
  body {
    width: 100vw;
    overflow-x: hidden;
  }
}

But the browser still allows you to add scrolling to elements below body. In other words, if your code doesn't interfere with html or body tag, it shouldn't inflict problems in your app.

user_124681110
Related