Modernizr position fixed test incomplete

Modernizr is great but the example test for position: fixed is quite incomplete:

  • iOS 4 and lower returns true while it doesn't support position: fixed
  • Opera on Windows returns false while it does support position: fixed

I found another test based on the Modernizr test but with iOS detection added: It isn't really future proof since the upcoming iOS 5 does support position: fixed.

Can you guys help me find a way to test position fixed in iOS without 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 =; = 'padding:0;margin:0'; = 'position:fixed;top:42px';

   var ret = test.offsetTop !== control.offsetTop;

   root.removeChild(control); = oldCssText;

   if (fake) {

   return ret;



I wrote this test for iOS:

It is a bit messy, but seems to work. Android is still a problem because of its "fake" position:fixed.


I have found that you need to insert some hacks to get a functional positionFixed test. For example i have inserted a hack into my test that returns true for iOS deviced running v.5 or above:

/*iPhone/iPad Hack*/
if(navigator.userAgent.match(/iPad|iPhone/i) !== null){
    /*Check if device runs iOS 5 or higher*/
    isSupported = navigator.userAgent.match(/[5-9]_[0-9]/) !== null;

I'm not sure how "clean" this code is, but it does the trick for me.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.