0

In my current MEAN stack project, everything functions fine on desktop Safari, Chrome, and mobile Chrome, but in mobile Safari for iOS, data-binding shows as text (e.g. {{data.total}} as opposed to $25). To make matters worse, when I open the app from iOS Safari served from localhost, it also works properly.

I've tried rolling back my Heroku app and the problem persists, even when I go back to a version from when I'm sure it looked good on an iPhone. I've checked it out on others' iPhones, and gotten the same negative result. I can't find this problem elsewhere on the internet, nor am I sure what I should be looking for as the problem seems to be with Heroku or iOS.

Here's the live page: http://minneapolish3-beta.herokuapp.com/reddress. This has me very much stumped, but I'm pretty green. If you find it not working on other platforms, I'd love to know about that as well.

(Naturally, I can't well spin up a CodePen example as the problem is only occurring in the wild.)

jamesthe500
  • 341
  • 1
  • 7
  • 10

1 Answers1

1

A friend introduced me to the Safari Web Inspector for mobile which allwed me to see warnings, alerts, etc.

It turns out that my Google Maps API call, via http://, was causing the page to break on mobile Safari. When I changed it to https:// everything worked! Thanks go to Bonus Kun whose answer to another question helped expedite my solution.

Community
  • 1
  • 1
jamesthe500
  • 341
  • 1
  • 7
  • 10