Button and link problem on Safari mobile (iPhone) (II)

[Zahnarzt_Helden]

Hello friends,

I’ll have to raise this topic again (https://theme.co/apex/forum/t/button-and-link-problem-on-safari-mobile-iphone/24627).

Buttons and clickable elements are not working in many iPhone versions.
Even the links in the right-drawer mobile menu sometimes will not work.

Exemplary button:

I have removed any customized code and set up a staging site:
https://test.zahnarzt-helden.de/dentalgeraete/behandlungseinheiten

1. Can you please play around and test with it on your team’s iPhones? We’ve got customers supposed to checkout on their phones…

2. What’s the proper way of binding a second button to toggle a PRO modal?

Thank you!
Martin

[rad]

Hi there,

Thanks for writing in.

1. Please add this code to your global custom javascript

jQuery ( document ).ready( function($) {

setTimeout ( function() {

$('a[href*="#"], a:not([href])').off('touchstart touchend');

} , 750 );

} );

2. It depends of what modal, would you mind providing more information about what modal and what button? It should be similar to this

jQuery ( document ).on('click', '.button_class', function($) {

$('.modal_class').trigger('click');

} );

Thanks.

[Zahnarzt_Helden]

Hi @Rad,

thank you. I’ve added the code from 1), wich is the only custom JS now.

However, I must say that it feels very “hacky” Like I said last time, there are other clickable elements than <a> tags and simply removing the touchstart and touchend event does not seem like a proper way.

Your code from 2) displays the exact same approach I’ve used before to trigger my additional buttons, but we suspected it to interfere with the events for the original buttons - that’s why I have removed it in the first place.
One example for such additional button would be the one called “Angebote erhalten” placed on the green background and triggering the one in the top right corner of the navigation.

Thanks for more help.

Martin

[christopher]

Hi there,

1. At the moment, that is the only way to address the issue. We have a very generic code for the inside page links for animation that we need to disengage that way. Our development team is aware of this matter and they are working to have a better approach for the one-page navigation in the upcoming releases.

2. The approach will not have an effect for the original buttons and what you see is actually the problem of the first question which as I mentioned will be addressed soon and at the moment you need to use that hacky solution.

Thank you.

[Zahnarzt_Helden]

Hi @christopher.amirian,

thanks for being so clear about it - appreciated!

I have added the suggested off('touchstart touchend') function, but two tested iPhones still have issues to reliably trigger buttons and links on some pages, e.g. https://test.zahnarzt-helden.de/dentalgeraete/behandlungseinheiten.

I’d be happy if you could look into it one more time - I’m totally ok with taking a dirty workaround if it solves the issue.

Thank you very much!

Martin

[ruenel]

Hey Martin,

Could you please update the portion of your JS code and use this instead:

/* make first row clickable */
    jQuery('#row_fragebogen_ausfuellen .x-text, #row_fragebogen_ausfuellen img').on('click touchstart', function() { 
      jQuery('#button_toggle_master-anchor-toggle').click();
    });

Hope this helps. Kindly let us know.

[Zahnarzt_Helden]

Hi @RueNel,

it’s not about these optional lines of code (I have removed any custom JS completely now).
The issue concerns standard buttons without any code adaption.

Regards
Martin

[rad]

Hi there.

The code is just about timing too, if the page and render longer than the code’s timeout then it will not work. Please try increasing the 750 value (1000 is equivalent to 1 second). Try it at 2000

Thanks!