Now that iOS5 is out, here’s a follow up to my previous post A Web Developer’s Wishlist for iOS 5. If you want to know what has (and hasn’t) been added/changed to Mobile Safari in Apples latest OS update, read on past the break.
Things added/fixed in iOS5
In particular I was hoping for support for fixed positioning and scrollable sub sections. Apple has added both these features into iOS5. Using
position: fixednow works as you might expect and its also possible to get one finger native/momentum scrolling sub sections using:
overflow: scroll; -webkit-overflow-scrolling: touch;
Here’s a video demonstrating the new feature
It appears there may be a few bugs with the implementation still, most obviously whether a swipe should move the scrollable section or the main window. If you want to achieve
overflow: scrollbehaviour in a full screen web app, I recommend against using the native implementation and instead using a solution such as iScroll or Scrollability until Apple provides a solution for these problems.
Better support for ‘window.print()’
When AirPrint was introduced in iOS,
window.print()worked when used inside Mobile Safari but not in a fullscreen webapp launching from the homescreen.
This has changed in iOS5, and now full screen web apps run from the homescreen can also make successful calls to
Other changes I’ve noticed
Datetime HTML5 input element
datetime-local input types now have custom UI inputs. The
range type has also been implemented, rendering as a slider (doesn’t have a custom keyboard UI).
Other features found via caniuse.com
Here’s a few other noteworthy changes thats to a comparison search on caniuse.com
- contenteditable attribute
- WOFF font support
- Inline SVG
- XMLHttpRequest2 (but no file upload?)
asyncattribute for external scripts
Things not added/fixed in iOS5
Close, but no cigar. Modernizr reports support but the 3d context isn’t publicly available. Here’s the official explanation:
WebGL will not be publicly available in iOS 5. It will only be available to iAd developers (source)
Current meta tag support is useful but it does pose some problems, especially if you wish to treat different devices differently. Suppose you’re using media queries to render your site differently for iPhone & iPad, you may wish to prevent scaling on iPhone but not on iPad. This (as far as I have found) isn’t possible without conditionally adding the metatags server side.
If these viewport controls were controlled via CSS then we could use the same media queries to deliver different settings to different devices!
It doesn’t look like anything has changed here.
Update: Thanks to David Storey for pointing out that there is a W3C draft spec for this: CSS Device Adaptation.
Better support for adding bookmarklets
Again, doesn’t look like anything has changed.
Not this time.
Remote Debug API
It doesn’t appear that this has made its way into iOS5 but in the meantime you can use the fantastic Weinre (now part of the PhoneGap project) to remotely debug your web apps on mobile devices.
If I’ve missed anything be sure to let me know in the comments!