title: Parts of Javascript don't work, but only on iOS Safari
body: <h3>TL; DR</h3>
  
  <p>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. </p>
  
  <p><strong>Why does iOS Safari seem to load only half of my script?</strong></p>
  
  <p><a href="https://nronnei.github.io/projects/bss/" rel="nofollow noreferrer">See for yourself!</a> Check out the demo on my GitHub site.</p>
  
  <p>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. </p>
  
  <hr>
  
  <h3>Background</h3>
  
  <p>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.</p>
  
  <h3>The pieces</h3>
  
  <p>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.</p>
  
  <h3>What I've tried</h3>
  
  <p>Based on various SO posts and blogs, I've...</p>
  
  <ul>
  <li>Made sure that HTTP version 1.1 is used</li>
  <li>Made sure my headers contain <code>Content-Type: text/html</code></li>
  <li>Set up CORS on my test server using <a href="https://www.npmjs.com/package/cors" rel="nofollow noreferrer">cors</a> (really, I tried everything I could think of)</li>
  <li>Tried wrapping the body in a <code>&lt;div onclick="void(0)"&gt;</code> (<a href="https://stackoverflow.com/questions/37143619/some-javascript-functions-dont-work-on-ios-devices-iphone-ipad">see more</a>)</li>
  <li>Tried changing the cursor to pointer (done on the body element)</li>
  <li>Tried using <code>touchstart</code> instead of <code>click</code></li>
  </ul>
  
  <p>I tested all of these methods using BrowserSync on several devices. All worked fine except the iPhone.</p>
  
  <p>I then turned to a little debugging using <code>alert</code> to try and see which code was actually getting run. From that I can say that my script <em>is</em> being executed, and Mapbox GL JS says it <em>is</em> supported, but when I put the <code>alert</code> inside <code>map.on("load", () =&gt; {});</code> it's never fired on iOS Safari. If you visited the site on another device, you'll notice it <em>does</em> fire on that.</p>
  
  <p>I wish I had a more specific question to ask, but I don't. </p>
  
  <p><strong>Why does iOS Safari seem to load only half of my script?</strong></p>