iOS problem with touch/click

Hi David,
I have recently updated my AB, Cordova ... Any how, one of our apps that you have already seen (https://lingolish.com/global-leaderboard-tips.html) does not respond to touch/clicks in iOS. We can scroll up and down in report control but can not switch between tabs. If we touch an element and let go very very quickly it picks it up otherwise, nothing. Everything works fine in Android.
Tried everything came to mind, appreciate any advice.

Hello Amin,

It's difficult to say, but, I think that if you get it working in Android... and in the browser, they must works more or less in the same way in iOS. Maybe you are using icons for the tabs? I know that sometimes "only icons" can cause some issue to get a good "click"... that is, is better to use and icon plus some text in a button, for example, instead only the icon.

But certainly I don't know how to help you, Amin... Maybe you can start trying with an empty app, a sample app, to be tried in iOS, trying to reproduce the problem, or looking how to get the best result. I can try to test here such sample app too. I have one specified app working in iOS without problems' reports... so maybe the icons, the tabs... (maybe changes the tabs for other control like buttons, if possible?)...

What I don't think is that latest AB releases or Cordova releases break something like that,... which of course is rare too, if previously is working more or less as expected... maybe you can try also with this Cordova WKWebView Engine plugin? I must recognize that never try it... but never find problems in iOS using the default Cordova webview...

Yeah... too much bla, bla, bla... not to say too much, but honestly I don't know how to help... of course I try your online sample... and works perfectly fine in Firefox... so they must work more or less in a similar way in iOS and other platforms too!

---

Hi David,
<preference name="Suppresses3DTouchGesture" value="true"> in config.xml causes issues with the onclick event. In my case with the app I build in AB it causes the event to only respond to a certain real fast touch event. But in my cordova app it behaves normally with .on('touchstart click', function (event). Is there anyway I could do the same with AB?
Appreciate your advice very much

Hello Amin,

If I understand well, you use the "Suppresses3DTouchGesture" option in config.xml? It's causing issues? Why you use it? Since I can't see it here in the config.xml that AB creates... ??

---

Hi David,
I quote Cordova (https://cordova.apache.org/docs/en/latest/config_ref/) "Suppresses3DTouchGesture" is "set to true to avoid 3D Touch capable iOS devices rendering a magnifying glass widget when the user applies force while longpressing the webview. Test your app thoroughly since this disables onclick handlers, but plays nice with ontouchend. If this setting is true, SuppressesLongPressGesture will effectively be true as well."
Our ios app users were complaining about once in a while magnifying glass opening up unwanted and we did not needed it any where, so we disabled it. It works fine with our Cordova app but causes issues in AB parts.

Hello Amin,

Certainly I am not very sure about what to do in AB for this case. Why if you use, for this specific case, Javascript events, instead of the AB controls? That is, is perfectly possible to prepare a code like the below one in your app view's Show event:

$('#MyButtonOrImageId').on('touchstart click', function (event) { // Do whatever you wanted then "MyButtonOrImageId" are clicked / touched... });

Can be a way to deal with it, Amin, if certainly the above event handler can do the job?

Below is a sample app that shown the above working in a sample button control. Copy the below code and save it in a file named "Sample.ab", then open this file with App Builder and run the app:

<?xml version="1.0" encoding="utf-8"?> <AppBuilder Version="2019.28"> <App> <ID>com.appbuilder</ID> <Name>New App 1</Name> <ShortName>New App 1</ShortName> <Version>1.0.0</Version> <Icon></Icon> <Width>320</Width> <Height>480</Height> <Scale>1</Scale> <Zoom>1</Zoom> <Theme>Default</Theme> <Themes></Themes> <Plugins></Plugins> <Description>Another App Builder app</Description> <AuthorName>App Builder</AuthorName> <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl> <AuthorEmail>info@decsoftutils.com</AuthorEmail> <LanguageCode>en</LanguageCode> <TextDirection>ltr</TextDirection> <Created>2019-04-04T10:50:54.121</Created> <Modified>2019-04-04T10:52:06.861</Modified> <BuildNumber>0</BuildNumber> <AutoBuildNumber>0</AutoBuildNumber> <Metadata /> <Webapp /> <ProWebApp /> <WebExtension /> <Cordova> <General /> <Plugins /> <Android /> <IOS /> <Windows /> <Phonegap> <CLIVersion>8.0.0</CLIVersion> </Phonegap> <Platforms /> <Splash /> <Config /> <Paths /> </Cordova> </App> <Views> <View> <Name>Master</Name> <IsMaster>1</IsMaster> <Controls /> </View> <View> <Name>View1</Name> <ShowEvent> <![CDATA[ StartJS $('#Button1').on('touchstart click', function (event) { alert('Hello there!'); }); EndJS]]> </ShowEvent> <Controls> <Control Role="2001"> <Name>Button1</Name> <Top>104</Top> <Left>56</Left> <Width>200</Width> <Height>40</Height> <Text> <![CDATA[Button1]]> </Text> <Kind>primary</Kind> <TabIndex>0</TabIndex> </Control> </Controls> </View> </Views> <Functions /> <Files> <Styles /> <Scripts /> <Folders /> <Images /> <Others /> </Files> <Generator> <Name>App Builder</Name> <Version>2019.28 (4/1/2019)</Version> <Email>mailto:info@decsoftutils.com</Email> <Website>https://www.decsoftutils.com/</Website> <Copyright>©2019 App Builder by DecSoft</Copyright> </Generator> </AppBuilder>

---

Hi David,
Thanks a lot for your great help as always. Moved the codes in the click events of all the buttons and images into functions and called the functions in the event listeners as you instructed and now it works like a charm in iOS with magnifying glass off. Your support is extraordinary David, I AM VERY GRATEFUL. There were only one thing, it was doubling the clicks so we fixed it with below inside each event: if (event.type == "touchstart") $(this).off('click');