page not working in Andorid because of issue in PhotoSwipe.js

[maliha]

Slideshow Gallery control not working on Android.

I debugged it a bit and seems to be a problem with version of PhotoSwipe.js version being used.

This is the main-mobile.js file that's included in site (https://cdn2.editmysite.com/js/site/main-mobile.js?buildTime=1616522225).

The file throws following error

VM2191:1 Uncaught TypeError: Cannot read property 'toString' of null
at eval (eval at initialize (main-mobile.js?buildTime=1616522225:formatted:1), <anonymous>:1:97)
at h.initialize (main-mobile.js?buildTime=1616522225:formatted:28775)
at new h (main-mobile.js?buildTime=1616522225:formatted:26336)
at Object.i.createInstance (main-mobile.js?buildTime=1616522225:formatted:28669)
at Object.i.attach (main-mobile.js?buildTime=1616522225:formatted:28631)
at Array.<anonymous> (main-mobile.js?buildTime=1616522225:formatted:29282)
at window._photoSwipeLoaded (main-mobile.js?buildTime=1616522225:formatted:29275)
at Object.604 (main-mobile.js?buildTime=1616522225:formatted:29231)
at s (main-mobile.js?buildTime=1616522225:formatted:38)
at r (main-mobile.js?buildTime=1616522225:formatted:29268)

This is thrown where PhotoSwipe is trying to extract Android verions 

i.Browser.android && 2.1 <= e.navigator.userAgent.match(/Android (\d+.\d+)/).toString().replace(/^.*\,/, "") && (this.isBackEventSupported = !0);

e.navigator.userAgent.match(/Android (\d+.\d+)/).toString() <== this is the part that throws error as match returns null

looks like on Github photoswipe is updated and using a different regex

https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/dist/photoswi...

I think weebly need to include new PhotoSwipe version

[Adam7]

Welcome to the Community, @maliha. Thanks for making your first post!

What version of Android and browser are you see this with?

[maliha]

Android 10
Chrome 89.0.4389.105

[maliha]

This is the useragent value sent by browser

"Mozilla/5.0 (Linux; Android 10; IN2019) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.105 Mobile Safari/537.36"

[maliha]

The issue is because of the Gallery control. As soon as I removed gallery things started working. Adding it back breaks the page again. 

[Bernadette3]

Hi @maliha Are you saying that the Gallery element breaks the entire mobile page? I think I may have misunderstood something in the beginning of the thread. 

Can you post a link to the live page you are having trouble with so we can take a look? As far as you know this is only happening on Android, correct? 

[maliha]

Hi, I have added a test page here (https://www.icnasisters.org/new-page.html). If you click on menu that will not work in Android. Intially I thought issue was in Slide control but then found that it's in gallery. Page starts working if I remove gallery.

[Bernadette3]

I wonder if it has to do with the custom theme. My apologies if you mentioned this earlier, and I didn't catch it, but what did you edit in the theme css/html? It could be causing the gallery element to break on mobile devices. 

[d1verseti]

The problem is with the regex that is in the match function - 

/Android (\d+.\d+)/

Since the user agent string gives 'Android 10' the reges returns null and exeception on the following toString method. The regex should be  

/Android (\d+(?:\.\d+)*)/

Which wont give null and exception since its taking into account that Android version in userAgent could be 10 and not 10.1 

[Elina123]

I have the same problem.

The same error is breaking my navigation menu on Android 10 and 11.

[Locutus132]

Hi all,

This is still an issue and impacting my mobile website. Is there any workaround identified?

Thanks.