I've created a mobile webbased game and use the "Add to homescreen" feature to allow users to add it as an app to their iOS devices.
However, recently it started malfunctioning. It has always worked without problem but started acting up possibly after the iOS 8.3 update. This is the code in my head, which has not been changed recently so should not be the problem:
<meta name="viewport" content="width=590px, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
When I get to the login screen it works without problem, however after logging in in landscape there are suddenly margins to the left and right. If I log in in portrait there are no margins. If I rotate the phone from landscape with margins to portrait it displays normally, if I rotate it back the margins suddenly increase by a lot and if I then try to rotate the device again it crashes.
I have taken some screens to show the problem:
- https://i.stack.imgur.com/2mmFU.jpg
- https://i.stack.imgur.com/3moD2.jpg
- https://i.stack.imgur.com/pRIml.jpg
- https://i.stack.imgur.com/zxWnZ.jpg
After that last screenshot the webapp just crashes. It only shows this behaviour in the webapp, if I access the game through Safari, my Android app (which loads the website in WebView) or the desktop with a simulated user-agent the website functions properly.
I've tried deleting the webapp, rebooting my phone and adding it back to my homescreen to no avail. I first guessed it was a caching issue but that should have been then resolved after viewing the website correctly in Safari.
For those wanting to try themselves, the game is www.reincarnationgame.com
