iOS 8.0 standalone web apps are broken

Joseph — Fri 19 Sep 2014

Working on OverDrive Read, I have a lot to do with the iOS standalone web app mode. This mode is what you get when a) you put the following in the <head> of your web page: 

<meta name="apple-mobile-web-app-capable" content="yes" />

... and b) a user on iOS comes along, taps the Share button in Safari, then taps 'Add to Home Screen', then taps on the icon.

(Android Chrome has an equivalent mode, which is not subject to the bugs documented here.)

Apple invented this mode, and it's been great, although it does tend to suffer breakage with each major iOS release. The release of iOS 8.0 has broken it more than usual, and it is essentially unworkable at the moment. This is not intentional, but it is unfortunate, as it coincides with Apple's intentional removal of the minimal-ui property that gave us nearly-full-screen apps inside Safari.

The problem is locking and unlocking

In a nutshell, if you open a web app from your Home Screen, and you then lock the device (ie, turn the screen off), when you unlock it, the app will likely be broken. You can only 'fix' it by closing the app and opening it again.

There are at least two classes of bugs that are affected by locking and unlocking, and they probably have the same root cause. The first is that any active timers created with setTimeout or setInterval will be stopped, and any new timers you create will never fire. Demo: timers.

The second class is that CSS transitions will cease to work after locking and unlocking. Demo: transitions.

… and iframes (it's always the iframes)

The third significant bug in standalone web app mode — at least for us — is that touch events in iframes are not triggered. Demo: iframe touch events.

This is perhaps not a big deal if your app doesn't use iframes. I logged it with Radar as an 'other bug' rather than a 'serious bug' because plenty of web apps would be unaffected by it. But if you do use iframes for sandboxing content, it's a massive problem. Since we have a reading app where content is supplied by book publishers, we need to use iframes to sandbox the styles and shape of that content from the styles used in our app. The <iframe> or <object> tag is pretty fundamental to our app.