I wrote a small AngularJS application that seems to work just fine everywhere except Safari (iOS), where I see only a blank page. If I connect the phone to my mac and run Web Inspector, I see that there are no javascript errors (in fact, the application works fine, and, looking at the DOM, I see that the region variables are properly evaluated and replaced in the templates). I see a lot of CSS errors. If I remove the offensive CSS styles (Bootstrap 3), the errors disappear, but the page remains blank. I tried to remove all CSS and the most trivial JS libraries to no avail.
I use the following JS / CSS (in order of appearance on index.html):
- bootstrap.min.css (v3.3.6)
- bootstrap-theme.min.css (v3.3.6)
- app.css (my own stylesheet, which literally has two trivial style definitions)
- angular.js (v1.4.9)
- angular -route.js (v1.4.9)
- ui-bootstrap.js (v1.1.2)
- ui-bootstrap-tpls.js (v1.1.2)
- lodash.js (v4.5.0)
- moment.js (v2.11.2)
- app.js (my own application)
Backend: Node 0.10 (runs on a free OpenShift account) using Express v4. Files are served through static middleware. No manual download is performed; deployment takes place directly from the git repository after clicking.
EDIT: Remove all CSS completely, but the problem persists. The app works completely everywhere and still shows a blank screen in Safari iOS.
source share