iOS5 supports position:fixed

28 Jun 2011

Finally, Safari on iOS5 will support position:fixed. This is great news for Web Apps! From now on it will be very easy to create a fixed toolbar without any javascript hacks! An example will illustrate the difference:
Position:fixed in Safari iOS4 Position:fixed; on Safari iOS4. Position:fixed in Safari iOS5 Position:fixed; on Safari iOS5 
The position for the menu-bar is fixed. As you can see on the screenshot of iOS4, it won't be visible once the user scrolls down the page. On iOS5 however, the menu-bar will always be visible. Thank you Apple for finally fixing this issue! Android has been supporting position:fixed for a long time now, and there are many workarounds available for iOS (most of them use Javascript). jQuery Mobile uses one of these workarounds to fix the toolbar on top of the page. The example used, is based on the website of nieuwecode. They came up with this highly creative design, which could never have worked on a mobile device. So I came with the idea of using the new CSS Media Queries. Even though I had no previous experience with Media Queries, I think I managed to succeed after all.