003 | Click events not triggered on iOS devices (sometimes)? Touchstart to the rescue

Are you experiencing weird browser behaviour with your website on iOS devices, where click actions are not responding? Kinda hard to debug if the exact same code seems to be working for one button and not for another, right?

I lost more time than I would have liked resolving this issue myself recently.

In my case I was working on a website based on the Divi theme, using the Divi Overlays plugin by Divi Life. The website contains several overlays, ranging from textual to video overlays and the very strange thing was (still is) that in iOS (Safari) some close buttons worked just fine and others didn’t, even on the same page.

After a long and rather frustrating time* I was finally able to crack it.

p.s. Having to answer for the issue over and over again in meetings gets pretty annoying I can tell you. (I’m waiting on support …, Yes I’m working on it …, I’ll come back to you when I figure it out …, I’m working on it …, …).

The following few lines of javascript might help you, If you experience the same issue.
In this code I simply check if the browser supports the ‘touchstart’ event, and if so, I trigger the ‘click’ event on ‘touchstart’. In my case I don’t really care whether or not the click event is triggered twice on some touch-devices (for the click event function already in place + the additional touchstart event).

jQuery(function ($) {
	// check if the device/browser supports the 'touchstart' event
	if ('ontouchstart' in document.documentElement) {
		// execute a click on the close button, if the 'touchstart' event is triggered on it 
		$(".close-divi-overlay").on('touchstart', function() {
			$(".close-divi-overlay").click();
		});
	};
});

* Remember, I’m not a front-end developer!