In theory position: fixed; is wonderful for mobile, as you can use it to pin menus and toolbars to the edge, giving quick access to commands. In reality, there's a few gotchas to watch out for:
Compatibility
On iOS, position fixed doesn't work on the following browsers:
- iOS 1 to 5 - Doesn't work at all
- iOS 5.1 to 7.1 - It works, but there might be issues when the user is scrolling. The fixed element might judder or disappear.
Given how old these browsers, they probably don't need to be supported. However, adding support is quite easy. Just add the following jQuery code to create a fallback class:
if (/OS [2-4]_\d(_\d)? like Mac OS X/i.test(navigator.userAgent)) {
$jq('body').addClass('no-positionfixed');
}Android has supported position:fixed since version 3 and Windows phone has always supported it.
Scrolling
If you create a fixed menu, you'll need to use the following to enable scrolling on the menu:
CSS (Apply to element):
webkit-scroll: touch
HTML Meta Tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />Test, test, test
Even with these fixes, position:fixed can still be buggy, especially on iOS. It's frustrating, as fixing it eats up development time, but it's the life of a web coder.