Feature detection for position: fixed

Question

I am trying to find a script that detects if a device places position: fixed elements relative to the ViewPort and not to the entire document.

Currently, standard desktop browsers and Mobile Safari (for iOS 5) do so, whereas Android devices place the fixed elements relative to the entire document.

I have found a couple of tests to detect this, but none of the seem to work:

• http://kangax.github.com/cft/ Gives me a false positive when I pass it from an Android device.
• https://gist.github.com/1221602 Gives me a false negative when I pass it in an iPhone with iOS 5.

Does anybody know where to find / how to write a test that actually detects that? I don't want to rely on browser sniffing.

Answer 1

According to the contributors at Modernizr, you cannot do this without detecting the browser in use. The contributors are quite well-established in the field.

Testing for position: fixed on iOS and Android devices is listed under the Undetectables wiki page in the Modernizr project.

The MobileHTML5 website lists the support for position:fixed. http://mobilehtml5.org/

Answer 2

Actually, the guys from the Filament Group did a smart thing with their Fixedfixed putting the user agent string of known false positives in their test.

Check it @ http://github.com/filamentgroup/fixed-fixed

Someone could complete it with some false negatives too, and make it a modernizr aditional featur test.

Answer 3

I've created another check if position:fixed is really supported in browser. It creates fixed div and try to scroll and check if the position of div changed.

function isPositionFixedSupported(){
    var el = jQuery("<div id='fixed_test' style='position:fixed;top:1px;width:1px;height:1px;'></div>");
    el.appendTo("body");

    var prevScrollTop = jQuery(document).scrollTop();
    var expectedResult = 1+prevScrollTop;
    var scrollChanged = false;

    //simulate scrolling
    if (prevScrollTop === 0) {
        window.scrollTo(0, 1);
        expectedResult = 2;
        scrollChanged = true;
    }

    //check position of div
    suppoorted = (el.offset().top === expectedResult);

    if (scrollChanged) {
        window.scrollTo(0, prevScrollTop);
    }

    el.remove();

    return suppoorted;
}

This function was tested in Firefox 22, Chrome 28, IE 7-10, Android Browser 2.3.