Although Modernizr is a valuable tool, the example test for position: fixed has some shortcomings:
- iOS 4 and below return
true, even though they do not actually supportposition: fixed - Opera on Windows returns
false, despite its support forposition: fixed
I came across an alternative test that builds on the Modernizr test but includes iOS detection: https://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8.
However, this test may not be future-proof as iOS 5 will support position: fixed.
Is there a way to accurately test for position: fixed in iOS without resorting to browser sniffing?
// Test for position:fixed support
Modernizr.addTest('positionfixed', function () {
var test = document.createElement('div'),
control = test.cloneNode(false),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
var oldCssText = root.style.cssText;
root.style.cssText = 'padding:0;margin:0';
test.style.cssText = 'position:fixed;top:42px';
root.appendChild(test);
root.appendChild(control);
var ret = test.offsetTop !== control.offsetTop;
root.removeChild(test);
root.removeChild(control);
root.style.cssText = oldCssText;
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});