Search code examples
javascriptiosiphonesafarihtmlcollection

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?

Solution

  • 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.