Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modernizr position fixed test incomplete

Tags:

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: https://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8. 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 = 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;
});
like image 739
DADU Avatar asked Jun 11 '11 15:06

DADU


1 Answers

I wrote this test for iOS: http://mnobeta.no/2011/09/test-position-fixed-for-iphone/

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

like image 151
Tor Brekke Skjøtskift Avatar answered Sep 21 '22 14:09

Tor Brekke Skjøtskift