javascript - Modernizr position fixed test incomplete - Stack Overflow

admin管理员组

文章数量:1330925

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

• 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 uping 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;
});

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

• 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./855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8. It isn't really future proof since the uping 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;
});

• javascript
• css
• html
• css-position
• modernizr

Share Improve this question Follow edited Feb 18, 2015 at 2:46 Volker E. 6,0441111 gold badges4949 silver badges6666 bronze badges asked Jun 11, 2011 at 15:14 DADUDADU 7,08688 gold badges4444 silver badges6464 bronze badges 11

• Hi, are you using the latest version of Modernizer. A new one was released today or yesterday I think and it covered such bugs. In anycase, position:fixed is poor on current mobile browsers. – Francisc Commented Jun 11, 2011 at 21:22
• 3 I don't have a solution for you, but the modernizr folk are aware of this issue: github./Modernizr/Modernizr/issues/167 -- might be worth your while shaking their tree to see if they can get it fixed. – Spudley Commented Jul 1, 2011 at 10:24
• 12 It's one of the great unsolved feature detection mysteries of the moment. So far there is no working feature detect for fixed pos that handles mobile webkit successfully. – Paul Irish Commented Jul 19, 2011 at 18:20
• 1 My understanding is that support for postiton:fixed requires scrolling. Mobile safari, to date, doesn't scroll. Instead, you move and resize a viewport which hovers above the content. Would it be enough to test for scrollability? Or does IOS fail that test too? – jimbo Commented Jul 25, 2011 at 20:20
• 1 @julien_c While there are many new tests, Modernizr 2.5 still doesn't ship one for position:fixed. – DADU Commented Feb 22, 2012 at 21:59

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 1

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.

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.

本文标签： javascriptModernizr position fixed test incompleteStack Overflow