Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Significat tap delay in Fresh cordova app #1269

Closed
kjetilge opened this issue Dec 10, 2017 · 16 comments
Closed

Significat tap delay in Fresh cordova app #1269

kjetilge opened this issue Dec 10, 2017 · 16 comments
Milestone

Comments

@kjetilge
Copy link

kjetilge commented Dec 10, 2017

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
Copy link
Member

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

@kjetilge
Copy link
Author

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
Copy link
Author

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
Copy link
Member

Can anyone reproduce this?

@pjschmidt3
Copy link

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

@JosielFaleiros
Copy link

I'm noticing similar results too :[

@Frondor
Copy link
Contributor

Frondor commented Jan 22, 2018

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

this.checkIfSelected()

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
Copy link
Member

rstoenescu commented Jan 31, 2018

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
Copy link
Contributor

Frondor commented Jan 31, 2018

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
Copy link
Member

@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
Copy link
Member

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

@rstoenescu
Copy link
Member

rstoenescu commented Jan 31, 2018

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
Copy link

gecko-8 commented Feb 4, 2018

Confirmed the workaround! Thanks.

@danicholls
Copy link
Contributor

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
Copy link

programm1st commented Aug 2, 2019

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants