MagnificPopup not working with iScroll 5

Question

I would like to upgrade to iScroll 5 for the performance improvements of scrolling on mobiles, but MagnificPopup library stops working for the iPhone/iPad. Here are the 2 code samples showcasing the issue:

1. Example of zoom working on iPhone/iPad with iScroll 4.2.5
2. Example of zoom NOT working on iPad with iScroll 5

Both examples work on the desktop, but on iPhone/iPad, example 2 using iScroll 5 will fail to open the MagnificPopup modal on click on a picture.

Any clue on what can cause this conflict?

Answer 1

Basically, since iscroll prevents the touchevent's default onBeforeScrollStart, a click event is simulated and dispatched on the target element if iscroll realizes the user did not scroll.

Great, but some elements (like text fields, anchor tags. image tag with hyperlink) would have received focus; that is unfortunately not taken into consideration.

To overcome this issue you may add the HTML tag to the iscroll.js or iscroll-lite.js at following line. Search for preventDefaultException in js file and you may add your tag on which you want action to be performed.

default value is

preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },

and I have added "A" and "IMG" tag to it

preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|IMG)$/ },

Enjoy dear, it will definitely work.

And more on thing you can do instead of above, you can also set click and zoom to true. while you IScroll object declaration

var myScroll = new IScroll('#wrapper', { click: true, zoom: true });

It will work for you click and zoom event.