I am currently working on a browser application targeted at Safari Mobile. The design calls for fixed toolbars across the top and bottom (similar to standard, native iPhone applications, but this will have a custom design). Normally, such a thing is quite simple with a web application, but due to some differences in the way Safari Mobile works (content moving/zooming/panning instead of scrolling behind the view port), this isn't possible.
The basic issues are that Mobile Safari: 1. doesn't/hasn't support(ed) fixed positioning 2. doesn't/hasn't support(ed) scrolling of overflowed content in a div (a recent update added two-finger scroll for over-flowed divs, but there are no scroll bars to indicate to the user that there is hidden/scrollable content) For those unfamiliar with the details, here are some articles: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ http://camerondaigle.com/articles/regarding_fixed_positioning_in_mobile_safari Solutions that people have come up can be grouped into two categories: 1. position the toolbars absolutely and then have a continuous listener that reposition them as the user scrolls 2. position the toolbars inline, overflow the center content, and use javascript/hacks to enable scrolling The issues with these solutions: 1. The problem I have with this approach is that Mobile Safari doesn't register the scroll until after it has completed. This makes it so that it can't slide doesn't and appear fixed. You have to fade it out when the scroll is initiated and then fade it back in once it has been completed. 2. Faking bounce, pan, zoom behaviors are never going to be as good as the native solutions they are mimicking. Customers notice and something feels wrong with your app. Popular solutions: http://jquerymobile.com/ jQuery Mobile users the first approach. This isn't an acceptable solution in my book. I'm also not interested in jQuery Mobile because it's primary purpose is an interface framework—something I don't need. I also have an interface framework. I just need some libraries/tools to assist with basic functionality. Sencha http://www.sencha.com/products/touch/ Everything I have read about Sencha is that it's really hard to work with. I'm also adverse to it for the same reasons as jQuery Mobile. I don't want an interface, or for the app to look like a native iPhone app. jQtouch http://jqtouch.com/ Development has mostly stopped on this. It also doesn't provide a fixed toolbars solution. iScroll http://cubiq.org/iscroll This works for solution two but I wasn't impressed with the behavior—scrolling was clunky. Richard Herrera's Fixed-positioning http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ This seems to work alright, but there still should be a better way. Google's approach http://code.google.com/mobile/articles/webapp_fixed_ui.html This is similar to what iScroll and Richard Herrara are doing, but feels more complete. The behavior isn't completely up-to-par with the native behaviors, but gmail on the iPhone and iPad are pretty decent. While rumors state that Apple is adding position: fixed and single-finger-scroll to iOS 5, it's not out yet and will be a while before everyone will be upgraded. http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5 Thus, in the interim, I'm desperately looking for a solution. I'm currently heading down the path that Google took. Has anyone developed a browser application for Mobile Safari that had fixed headers and footers? What approach did you take? Any advice? Any other solutions out there? Thanks, Wade _______________________________________________ UPHPU mailing list [email protected] http://uphpu.org/mailman/listinfo/uphpu IRC: #uphpu on irc.freenode.net
