HTML5 webapps broken on the iPad

iPad?

Apple seems to be a big proponent of HTML5: They use it for their new iAds, as Steve proudly announced during his last Keynote. So when I wanted to maken an Ipad webapp, I didn’t expect any issues. For a client of mine, I planned to work on an iPad webapp this week. It’s even the reason I bought an iPad.

Let’s start with the only good news: Setting an homescreen image, with

<link rel="apple-touch-icon" href="/custom_icon.png"/>

does work, and if you make the image 72 pixels wide, it looks great on both iPhone and iPad (the previous advice was 57 pixels, but this looks blurry on the iPad as it’s scaled up).

On the iPhone, there are some other properties you can set on a webpage to make it work offline: Besides the homescreen icon, you can set the status bar color, startup image, and viewport size, and make files work when not online. The result looks and works like an app instead of a webpage: No URL field, navigation buttons, a startscreen, etc. Apple invented these, and has extended their support in their OS updates. See for a good description: How to Make an HTML5 iPhone App and a great HTML5 example app is the PieGuy game. They work great, and can make it easier to build and distribute an application, without sending it to Apple for approval (the current appstore mess is a whole different blogpost).

Since Apple supports this in their iPhone OS, and the iPad runs iPhone OS 3.2, I expected this all to work. Unfortunately, it doesn’t.
On the iPad, the startup image and viewport size are ignored when run in webapp-mode. The viewport size is only used when shown in a normal browser window, and the startup image is never shown :(.

On an iPhone with OS 3.1, both do work. This makes the result, on an iPad, work more like a (broken) webpage, than an application.

Why did apple take working stuff out, when upgrading the iPhone OS from 3.1 to 3.2 for the iPad? Is this a simple omission which will be fixed, or is apple actively moving away from HTML5 webapps for the iPad, further pushing their appstore? Only time will tell.

Update:

I looked into this some more, and have more results:

If  you use a image with the right size, (1024*768), it does (sometimes) work on my iPad as startup image. My previous tests used a iphone-sized image, which is totally ignored on the iPad. However, it often takes a few tries before it shows the loading image, and sometimes shows a screenshot of the page, before showing the default loading screen. (so the flow is then screenshot->default.png->webpage).

I still can’t get the viewport tag to work in webapp mode: If I set the viewport to a predefined with, like:
<meta name=”viewport” content=”user-scalable=no, width=1024″/>
this does work in Safari, but is ignored in Webapp mode. If I set a scale:
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”/>
and test in Safari, this does work on first load. However, if I rotate my ipad, and rotate back, the scale is set differently.

10 thoughts on “HTML5 webapps broken on the iPad

  1. These features haven’t been removed entirely, but as I found when I tried to add them to Cappuccino some of them are very buggy (http://github.com/280north/cappuccino/blob/master/Tools/capp/Resources/Templates/Application/index.html#L16-22 and http://github.com/280north/cappuccino/commit/9f50f0806528d038ac035a9f882ed983ac9f9239).

    “apple-touch-icon” and “apple-mobile-web-app-capable” work as expected, as do HTML5 cache manifests.

    Setting the viewport meta tag to “initial-scale=1.0, user-scalable=no” also works as expected, which is what I needed to get Cappuccino applications to display correctly (this is probably what you want for most JavaScript “applications”). I didn’t try any other configurations. This works in both MobileSafari and applications saved to the home screen.

    I tried “apple-mobile-web-app-status-bar-style” with “black” (default) and “black-translucent”, both seemed to work for me, but I stuck with the default.

    The biggest problem is with the default image, i.e. “apple-touch-startup-image”. For some insane reason it expects the PNG to be 748px wide by 1024px tall. This aspect ratio implies the image should be portrait oriented, yet the 20px for the status bar is taken from the narrower dimension, implying that it should be landscape oriented.

    And in fact the image is scaled from 748×1024 to 768×1004. There is no way around this AFAICT.

    Original default.png image: http://cl.ly/JCs
    Displayed in portrait orientation: http://cl.ly/IyM
    Displayed in landscape orientation: http://cl.ly/Ibx

    The only way to get something reasonable is to squash your default image in the opposite direction. That is, start with a 748×1024 image, crop it to 768×1004, then scale it *back* to 748×1024. Unfortunately then you end up with a white bar along one edge in landscape mode. Madness.

    If I’m mistaken about any of this I’d love to know.

  2. What you might want to consider is that the current iPad OS was probably feature-frozen many moons ago in anticipation of not doing anything that could stand in the way of hardware sales (such as shipping with buggy software) on day/week/month 1.

    My guess is that forthcoming OS updates will fix these issues and a lot more, a la iPhone OS 2.0. It’s important to keep a clear distinction in mind between hardware and software on these devices, even though they function as appliances.

  3. No kidding. We have been lead astray in many ways. One is that the iPad is so slow in javascript as to be nearly useless on many things. see this http://ctndigital.com/ctnd/2010/04/ueling-tablets/
    and try this on your ipad http://www2.webkit.org/perf/sunspider-0.9/sunspider.html

    jquery, mootools, protoype all dog out on me when i do anything interactively sophisticated.
    http://lookbookhd.com/ipad barely works as intended, but at least i get videos where i want them

    HTML5 is a red herring right now. we need Apple to fix this and make an optimal js library that uses what the chipset and webkit are willing to do well.

    this current situation is not reasonable.

  4. I use the following code and all works well

    (function() {
    var filename = navigator.platform === ‘iPad’ ?’ipadSplash.png’ : ‘iphoneSplash.png’;
    document.write(” );
    })();

  5. I looked around and learned that Telerik has released some widgets for its development tool kit that’s built specifically for iPad. Is this news going to help you with the issue you’ve discussed here? This article was written a couple of years ago and I’m wondering if there are any improvements. Anyway, thank you so much for sharing your experience with using HTML5 for apps on the iPad.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>