Button and link problem on Safari mobile (iPhone)

[Zahnarzt_Helden]

Hi there,
we’ve been experiencing issues with button and links that will simply not work or only sometimes in Safari mobile (iPhone). I’ve tested with iPhone 5, iPhone 6 and even iPhone X - buttons will not fire when tapped on.

The issue is related to how Safari handles touch and click events, and you will find plenty of discussion and incomplete solutions: Event bubbling not functioning as expected, cursor needs to be pointer, onclick attribute needs to be set, etc.

My ugly workaround was to bind the touchend event to every clickable element to trigger the click() function:

  /* very hacky addition of touchend event for mobile Safari */

  if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
    var clickableElements = ".x-anchor-toggle, button, .x-anchor-button, li.menu-item, input.submit, .x-scroll-top";
    jQuery(clickableElements).attr("style", "cursor: pointer;");
    jQuery(clickableElements).bind( "touchend", function(e) {
      jQuery(this).trigger("click");
    });
  }

The site is https://zahnarzt-helden.de.

Can you investigate and provide some more tips?

Thanks!

[rad]

Hi there,

Thanks for writing in.

Please try this workaround,

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

setTimeout ( function() {

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

} , 750 );

} );

Thanks!

[Zahnarzt_Helden]

Hi @Rad,

thanks for the speedy reply. Can you please explain a bit more?

If I understand correcly, we would now be removing all of the touchstart and touchend events from <a> tags 750 ms into the DOM load.

But those events are not bound by default, right?

Thanks
Martin

[rad]

Hi there,

Does it fix the issue? The touch event is blocking the event bubbling and your solution should work. I just provided another workaround, just remove the one that blocks it. The 750 is 7.5 seconds delay after the page load before it starts removing the binding. That is to make sure the touch event is bound first before removing it. Else, it will not work.

Thet are bound by default,

  $('a[href*="#"]').on('touchend click', function(e) {
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();

        if (dragging) {
	        return;
        }

        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

});

It should work okay, but it behaves differently in IOS.

Thanks!

[Zahnarzt_Helden]

Thanks, I will try it!

One more question though: <a> tags only might no be enough, I think.
The list I have used is probably not sufficient, but inlcuded a selector, which also was clickable on iPhones:

var clickableElements = “.x-anchor-toggle, button, .x-anchor-button, li.menu-item, input.submit, .x-scroll-top”;

[nabeel]

Hi again,

Can you please share the URL of the problematic page so we can take a closer look?

Thanks!

[Zahnarzt_Helden]

Hi @Nabeel,

sure. The issue is not fully resolved yet unfortunately. Safari behaves strangely. No matter if it was iPhone SE or even X.
Elements which I encountered to be sometimes clickable, sometimes not: var clickableElements = “.x-anchor-toggle, .x-anchor-button, li.menu-item, input.submit, .x-scroll-top”;

Before visiting, would you mind setting a cookie via https://www.zahnarzt-helden.de/spacecookie.php so you are counted as internal traffic? Then visit: www.zahnarzt-helden.de on an iPhone. Try buttons and especially the mobile menu. Remember that I have included my own hot fix as a global JS currently.

Thanks!
Martin

[rad]

Hi there,

It’s not just iPhone, it happens on all devices and it’s not because of the theme. Something is triggering it twice, hence, it appears not opening since it’s closed again. I can see the Classes being toggled from the inspector so it’s working, except affected by something else.

Please remove all your custom javascript first before we continue, but make sure to back it up first.

Thanks!

[Zahnarzt_Helden]

But it used to be faulty before I’ve added a single line of code…
You probably have a clean install of the theme for testing purposes, right?

[ruenel]

Hey There,

Yes we do and we do not encounter this issue. Could you please set up a staging site? This is very useful because you can test drive any X updates in the staging area, do the customizations and troubleshooting without disrupting your live site. Once everything is perfect, you can easily and flawlessly proceed the update in the live site. To know how to create a staging area, please check out these articles:
http://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/, https://maintainn.com/2015/02/how-to-create-a-staging-site-for-wordpress/

By the way, Pro 2.0.4 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.