Performance problems only with iPad Air (2013)

[Sharaal]

Hi,

I created an online scorecard for qwixx with riot.js. With browsers on PC and Smartphone all works pretty fine. But on my tablet, which is an iPad Air (2013), I have massive performance problems (1 sec after click an element till UI update).

Someone have an idea it's a generall problem with riot.js, the iPad Air (2013) just not have enough power or I do something very strange/wrong?

For the last question:

• here my tag file: https://gist.github.com/dragonprojects/229a09f4963fcc3d6772 (but carefully, its not that small)
• and here the current running version using it: http://dqwixx-staging.herokuapp.com/

[GianlucaGuarini]

i think this is a duplicate of https://github.com/riot/riot/issues/1599#issuecomment-185653668

[GianlucaGuarini]

BTW thanks for the example

[Sharaal]

Maybe, I don't have route thingies, but nested loops with each. Will have a look at the process of the other ticket too, thx. :)

If you need something more, just ask, can give you access to the repo and co.

[r4j4h]

This may be unrelated, but it's worth checking out since your issue is Apple related around that time.

http://stackoverflow.com/questions/19335109/ios-7-safari-os-locks-up-for-4-seconds-when-clicking-focusing-on-a-html-input

[GianlucaGuarini]

@dragonprojects can you specify better model and version where the issue occurs please?

[Sharaal]

Modell: MD785FD/A Version: 9.1 (13B143) / 9.2.1 (13D15) (tested with both ersions)

[GianlucaGuarini]

@dragonprojects can you please try https://github.com/GianlucaGuarini/Tocca.js replacing the onclick with ontap?

[aMarCruz]

@r4j4h thanks, now I know why the timeouts with iOS 7 in Browserstack.

[Sharaal]

@GianlucaGuarini I can try it this week yes, at the weekend I will not have much time. But I can give you read access to the repo and you can fork and try things if you want?

[GianlucaGuarini]

thanks @dragonprojects the problem is that I have no iPad and on my mac iPad emulator everything works fine on your demo

[Sharaal]

@GianlucaGuarini I added the Tocca.js to the app, see here: http://dqwixx-staging-pr-4.herokuapp.com/ or better see in the tag file: https://gist.github.com/dragonprojects/18fcbbcd508f9a69ac3b

I added the ontab to all clickable elements which have the onclick, so both events are added, is that right? I will test it in the afternoon.

[GianlucaGuarini]

ontap is enough for desktop and touch devices ;)

[GianlucaGuarini]

btw you have used ontab it's ontap please fix it

[Sharaal]

arg, had "tablet" in mind :) its fixed. but with only ontap it doesn't really work on desktop (chrome 48), it does only works sometimes, strange.

Updated .tag file: https://gist.github.com/dragonprojects/e145b8b60ae55f9940e8

[tayler1]

I can confirm that lag exist. Both on simulator and on real device. https://d.pr/v/C6nA

[GianlucaGuarini]

The lag is due a known apple behavior on the click events in javascript, if @dragonprojects you replace the onclick simply with ontouchstart the lag will disappear.

You can use eventually https://github.com/ftlabs/fastclick or https://github.com/GianlucaGuarini/Tocca.js as alternative solution avoiding to bind 2 king of events. Remember that if you bind onclick and ontouchstart on the same element they will be called at same time so you must debounce your callback

[GianlucaGuarini]

I have update the tag can you try again with my version please?

[tayler1]

Maybe I just did something wrong, but debounce introduces new '1 click behind lag' https://d.pr/v/1fbJu

[GianlucaGuarini]

What if you only use ontouchstart without any debounce?

[tayler1]

Yes, ontouchstart without onclick works better.

[GianlucaGuarini]

So the issue is not in riot. @dragonprojects can we close this issue?

[Sharaal]

Soo, I did some tests (browser = chrome 48, iPad = my iPad):

1) ontouchstart alone, without debounce: Maybe I did something wrong, but ontouchstart alone doesn't work on the browser (no reaction, seems the browser don't trigger this kind of event).

Tagfile: https://gist.github.com/dragonprojects/06a83620c69632532646

2) ontouchstart and onclick with debounce: The already described "1 Click behind lag" on browser and iPad.

Tagfile: https://gist.github.com/dragonprojects/7656249f7f6ca6f25699

3) ontouchstart and onclick without debounce: Works pretty well on browser and iPad.

Tagfile: https://gist.github.com/dragonprojects/b0e115b4eec9eebd9bb2 Demo with currently this last test version: http://dqwixx-staging-pr-4.herokuapp.com/

Soo, ontouchstart solve the performance problems on iPad but alone it doesn't work on the browser. Together with onclick it seems all works pretty well (also tested on android smartphone). It seems touch devices (at least my ones) don't trigger the onclick if there is a ontouchstart on the same element, so they care about not triggering twice.

But both events without debounce sounds like some other devices maybe trigger both events at the same time, so produce two actions by one click?

[GianlucaGuarini]

@dragonprojects according to your tests this issue is not related to riot (as I mentioned before). In your case I would use scripts like Tocca.js, fastclick or Hammer.js that were made explicitly to solve this problem. You just need to chose the one suits better to you. I am closing this bug for now.