nronnei nronnei -4 years ago 93
Javascript Question

Parts of Javascript don't work, but only on iOS Safari

TL; DR



My HTML/CSS/JS web app works perfectly on all my Android devices and in my laptop browser, but not in Safari on iOS. Instead, the map doesn't load and click listeners don't get applied. It seems that the Javascript only partially loads, but that's ridiculous.

Why does iOS Safari seem to load only half of my script?

See for yourself! Check out the demo on my GitHub site.

I know this is a bad question by community guidelines, but I just don't know what question to ask. There are no console errors to follow up, no clues at all.




Background



I'm working on a little app I call Bike Share Explorer. It's a web app which uses Mapbox GL JS and Google MDL. This web map lets people explore bike share systems and bike availability in those systems.

The pieces



I'm using browserify to bundle Mapbox GL JS and other code I need with the Javascript for my page. The app is built to run on an Express server and the front is written using Pug, but whether I'm serving with Express or from the filesystem, everything works just fine on my computer.

What I've tried



Based on various SO posts and blogs, I've...


  • Made sure that HTTP version 1.1 is used

  • Made sure my headers contain
    Content-Type: text/html

  • Set up CORS on my test server using cors (really, I tried everything I could think of)

  • Tried wrapping the body in a
    <div onclick="void(0)">
    (see more)

  • Tried changing the cursor to pointer (done on the body element)

  • Tried using
    touchstart
    instead of
    click



I tested all of these methods using BrowserSync on several devices. All worked fine except the iPhone.

I then turned to a little debugging using
alert
to try and see which code was actually getting run. From that I can say that my script is being executed, and Mapbox GL JS says it is supported, but when I put the
alert
inside
map.on("load", () => {});
it's never fired on iOS Safari. If you visited the site on another device, you'll notice it does fire on that.

I wish I had a more specific question to ask, but I don't.

Why does iOS Safari seem to load only half of my script?

Answer Source

As best I can tell, the page isn't working on iOS because an exception is being thrown

TypeError: btn of centerMapButtons is not a function. (In 'btn of centerMapButtons', 'btn of centerMapButtons' is undefined)

centerMapButtons does not implement an iteration protocol and therefore cannot be used in a for...of loop.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download