Tuesday
Jan182011

Mobile Safari Ignores textarea readonly Attribute

I had trouble finding anyone else documenting this behavior, so here it is for anyone else wondering if they're doing something wrong (you're not).

Mobile Safari (iPhone, iPad, iPod Touch) will pop up a keyboard when you touch a readonly textarea field, but not when you touch a readonly input of type "text".  Seems like a pretty straightforward bug on the Apple side.

Test this on your iOS device of choice here, or on the W3C School's site:

Readonly Input:

Readonly TextArea:

Readonly & Disabled TextArea:

Monday
Jan102011

Apple "WebApp" Short-Comings?

The iPhone/iPad/iPod "apple-mobile-web-app-capable" meta tag is great for hiding browser chrome and giving users a "full screen" experience once they add your page to their home screen.  Unfortunately I'm finding it's a real pain for fast switching between apps.

If I load my single-page "app" in regular Safari, then press the home button, then task-switch back to Safari, I'm right back where I started without any noticeable difference. Safari appears to have stayed 100% resident in memory and users can happily bounce to and from my app.  Certainly loading a bunch of resource-intensive apps will cause some to be unloaded, but for now my test case is just going "home" then switching back.

What if I instead load my app from a home screen icon, so I can enjoy the increased screen space of "apple-mobile-web-app-capable"?  My testing on both an iPhone 4 and an iPad shows the same unfortunate behavior - the app reloads 100% of the time. I'm already using things like the Application Cache (manifest) and local storage for offline access, so my users haven't lost any data or their place in the app, but there's still a noticeable ~1 second stall while the HTML and Javascript are spun up again.

I've tried disabling my Application Cache, just to take it out of the equation.  In that case I see each "task switch" to the app hitting the server every time, even when the page is set to be cached w/ a 1 yr expiration.

I've still got a few more experiments to try, but so far it's looking like bundling your page as an "app" in this way actually makes it very unfriendly for users who might want to, god forbid, use more than one app at a time.