So, I have this newsletter-signup-popup window that has a close [X] button. The code to close it looks like this

$(document).on('click touchstart', '.ns-close-popup', this.closeSubscription.bind(this));

The close function only calls the jQuery function .fadeOut() on the element that needs to be closed.

This however, does not work in Safari on an iPhone. It works fine in Safari on a Mac Mini and also in Chrome on an Android phone. It also works fine in Chrome on Windows.

So my initial thought was that the problem was related to the touch so the touchstart event was added; I've also tried with touchend - for good measure, but neither seems to do the trick. Since it works fine on the Mac Mini as well as Windows I'm not under the impression that the code isn't being triggered correctly. Unless there's something different happening on an iPhone compared to a Mac Mini.

I'm trying to figure out what could cause this to not work specifically on an iPhone, but without luck. Any ideas or suggesions would be greatly appreciated, thank you.

CodePudding user response：

I figured out the solution to my problem.

Apparently Apple has in the newest version of iOS (version 15.4) made specific changes to the CSS attribute: "backface-visibility: hidden". And because of this they, as far as I was able to find out, disabled the -webkit- version of it.

This specific change did something to how an iPhone handles touch events on elements that have their backface hidden. In short, an element which has its backface hidden cannot react to a touchstart(/end) event like the one mentioned in the question, so it essentially becomes untouchable. Prayerblessings sent to Browserstack or I would have never been able to figure this out. On Browserstack I was able to figure out that it was specifically for iOS 15.4, everything worked fine on iOS 15.3 and prior. Luckily devtools showed that backface was 'unsupported' (had a yellow line under it) which led me to try and comment out that css value.