June 8, 2011 / Mark Schumacher

“Fixed” Got Fixed

iOS 5

As an office of predominantly iPhone users, we were all excited about WWDC and the future of iOS. Overall, Apple didn’t disappoint; I’m ecstatic Notifications has been overhauled and I’ll be glad to see my missed calls AND crucial Foursquare checkins together at last (Oh, cool, you’re at Chipotle again? Way to go!).

In addition to the 10 major iOS features that Apple covered, there is a hell of a lot more baked in that is sure to excite users. For example, did you know you can now setup the iPhone 4’s LED flash to indicate alerts? Cool! Oh, and you can now wirelessly mirror your iPad 2 to your TV (albeit via Apple TV). Nice!

One of the things that really got me jazzed, though, is an upgrade to Mobile Safari that now supports crucial CSS that it didn’t used to. Specifically:

position: fixed


overflow: scroll

The first makes it possible to (easily) create top and bottom toolbars to mimic native apps, while the second provides the ability to scroll on <div>’s where the content exceeds the container. Why these properties weren’t built into the first release is beyond me, but I’m glad to see them finally make an appearance.

Thankfully, in the meantime, there are workarounds which we’ve been implementing into our web apps. You could choose a mobile framework (we’re big fans of Sencha Touch) or there are JQuery plugins out there that do the job. We’ve found iScroll 4 to work the best.

Now if only they’d implement a decent GPS app a la Android. They’re probably too busy working on their Spaceship office.

iOS5 launches this fall. Perhaps alongside a new iPhone…?

Image Credit: Apple