Quasar: Significat tap delay in Fresh cordova app

[kjetilge]

Quasar: v0.14.4
OS: macOs Sierra
Node: v8.9.0
NPM: 5.5.1
iOS: 11.1.2

Error

When running a simple Quasar app with a toggle button in Cordova on simulator and iPhone there is a very noticeable delay when clicking a button.

Expected

I expected the button to be as fast as for example clicking a toggle button found in the admin example:
https://github.com/odranoelBR/vue-quasar-admin-example

• which after testing and comparing it to the admin example I found it is clearly not.

Steps:

Created new app

quasar init default Qtest
cd Qtest
yarn install
quasar build
quasar wrap cordova
cd cordova
cordova platform add ios

Added build.json file to cordova root:

{
    "ios": {
        "debug": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "XXX",
            "packageType": "development",
            "buildFlag": [
                "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
            ]
        },
        "release": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "XXX",
            "packageType": "app-store",
            "buildFlag": [
                "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
            ]
        }
    }
}

Changed Hello.vue to:

<template>
  <q-layout>
    <div class="layout-padding">
      <h3>Click speed test</h3>
      <q-toggle v-model="checked" label="Toggle Label" />
      <h3 v-if="checked">Showing!</h3>
    </div>
  </q-layout>
</template>

<script>
  import { QLayout, QToggle } from 'quasar'
  export default {
    data () {
      return {
        checked: false
      }
    },
    components: {
      QLayout,
      QToggle
    }
  }
</script>

Started the app:

cordova run ios

To me it seems like fastclick is not working. The delay is at least 300ms.

[rstoenescu]

Hi, What Quasar version are you using? 0.6.4 is the Quasar CLI version.

[kjetilge]

I'm using 0.14.4. I guess It was automatically selected by the CLI ? I can see there is a version 0.15 how do I initiate with latest version ?

[kjetilge]

I tried to switch to 0.15 but was unable. However I managed to upgrade to 0.14.7. But it did not help.

[rstoenescu]

Can anyone reproduce this?

[pjschmidt3]

I'm noticing similar results, though I haven't explored it very much yet.

[JosielFaleiros]

I'm noticing similar results too :[

[Frondor]

As stated in #1369 I've been experiencing this as well (v0.14), but on chrome dev tools android emulator (device toolbar) and chrome browser (android app), there's a slight delay when pressing a router-link tab.

Looks like the underlying implementation of router-link component has some performance issue.

If I have to give my $ 0.50, I'd blame $nextTick here https://github.com/quasarframework/quasar/blob/7337478eb74d573554b5f4611279aa483c041d08/src/components/tab/QRouteTab.js#L9

Isn't it possible to get rid of all that router link mixin / implementation and simply work with programmatic navigation? Thus working with this.$route (and getting rid of that watcher) in computed properties for the element state / classes?

Demo https://youtu.be/iHTzxNyQw60

Code

    <q-tabs slot="footer"
      position="bottom"
      :color="appColor"
      align="justify"
      :two-lines="false"
      class="non-selectable">
      <q-route-tab replace to="/route/tab1"
        icon="devices_other"
        slot="title" />
      <q-route-tab replace to="/route/tab2"
        icon="store"
        slot="title" />
      <q-route-tab replace to="/route/tab3"
        icon="room_service"
        slot="title" />
      <q-route-tab replace to="/route/tab4"
        icon="local_activity"
        slot="title" />
    </q-tabs>

Although in this example looks like it works fine https://codesandbox.io/s/381l9rz8wm so I don't really know atm

[rstoenescu]

Hi All,

This is NOT Quasar related. It is specific to iOS alone. Even with the latest webkit updates, unfortunatley iOS standalone apps still have the 300ms click delay, so we need to bring in fastclick to alleviate this.

What to do for pre v0.15: npm install fastclick, then in main.js

require('fastclick')
document.addEventListener('DOMContentLoaded', () => {
   FastClick.attach(document.body)
}, false)

In v0.15, this will be handled automatically (injected only when building with cordova mode for iOS platform) so you don't need to worry about it. Pushing a commit tomorrow for this (on v0.15) and closing the bug.

[Frondor]

How can this be an iOS specific issue if I'm experiencing it on android 5.1 and Chrome's devtools android emulator as well. Probably you meant WebKit itself?

I already tried integrating fastclick but it didn't work, I don't think the 300ms rule has something to do with this. See this answer https://stackoverflow.com/a/27175671/2474872
I'm already using <meta name="viewport" content="width=device-width, user-scalable=no" /> and there's no such 300ms delay, besides of these tabs (which I can't really measure to be exact), and only these tabs, because I have many and all the rest are just tapping fine.

Edit: I just tried FastClick again, it just doesn't work.

Even tried following this article https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away

with

html {
  touch-action: manipulation;
}

without success. I strongly believe the problem is within q-route-tab component, because normal q-tab are working just fine.

[rstoenescu]

@Frondor Ok, these are two separate issues. I re-read yours and it's nothing to do with this one. So let's continue your talk on the initial ticket (reopened it). Agreed?

This one relates to iOS only and on iOS they haven't removed the 300ms delay (for standalone apps only! -- so that's PWA or Cordova). It's easily reproducible and the fix I mentioned above is valid. With Android, on the other hand, there's another story. It's been a long time since they removed the delay. Pushing a fix today for v0.15.

[rstoenescu]

@Frondor Actually, pls open a new ticket with your issue. Thanks.

[rstoenescu]

Pushed a commit for CLI (v0.15) just now to automatically inject Fastclick when building a Cordova app targetting iOS. Thanks for reporting.
Those who are on pre v0.15, use the workaround that I specified in an early post.

[gecko-8]

Confirmed the workaround! Thanks.

[danicholls]

This helped until I found the fastclick iOS resume bug, where it freezes on app resume.

So I edited my package.json (calling this repo, based off this pull request, responding to this issue), npm uninstalled and reinstalled fastclick, and then the workaround above continued to work:

"dependencies": {
  "axios": "^0.18.0",
  "fastclick": "github:lasselaakkonen/fastclick"
},

[programm1st]

I had problem with IOS delay in cordova app, and just solution that offered @danicholls solved my problem! THX!

p.s i have very strange problem. on ios i had tap on some inputs around 300ms and just after that input going selected.

[danicholls]

p.s i have very strange problem. on ios i had tap on some inputs around 300ms and just after that input going selected.

Without seeing any specifics, especially if wrapped in a label (if I recall my own debugging correctly), you might experiment with adding the needsclick class.