Add iOS support to position:fixed sample code

[matthewbuchanan]

The sample code provided in the addTest() documentation for detecting support for position:fixed reports a false positive in Mobile Safari. (This browser correctly positions objects with that style applied, but does not keep them fixed in the viewport when the page scrolls.)

[paulirish]

matt,

i'd be curious if you tried out this code:
https://github.com/jquery/jquery/blob/eed380/src/offset.js#L125-143

if it rectifies the iOS false positive.

cheers

[matthewbuchanan]

Hi Paul, sorry for the delay. Just tested that code and it returns the same false positive on both iPhone and iPad :(

[paulirish]

Just a note that Marc Grabanski told me he spent 7 hours trying to solve this one without a successful resolution. :/

[torbs]

// Tested on iphone with IOS 5 beta and IOS 4

var IOS_FIXED_POSITION;

window.onload = function () { // Should be addEventListener etc...

if (typeof document.body.scrollIntoViewIfNeeded === 'function') {

    (function () {
        var container = document.body,
        el = document.createElement('div'),
        originalHeight = container.style.height, 
        originalScrollTop = window.pageYOffset;
        testScrollTop = 20;
        el.style.cssText = 'position:fixed;top:0px;height:10px;';

        container.appendChild(el);
        container.style.height="3000px";

        window.addEventListener('scroll', testScrollTop, false);
        window.setTimeout(testScroll, 20); // ios 4 does'n publish the scroll event on scrollto
        window.scrollTo(0,testScrollTop );

        function testScroll() {
            if (IOS_FIXED_POSITION === undefined) {
                el.scrollIntoViewIfNeeded();
                if (window.pageYOffset === testScrollTop) {
                    IOS_FIXED_POSITION = true;
                } else {
                    IOS_FIXED_POSITION = false;
                }
            }
            window.removeEventListener('scroll', testScroll, false);
            container.style.height=originalHeight;
            container.removeChild(el);
            window.scrollTo(0,originalScrollTop);
        }

    }());
} else {
    IOS_FIXED_POSITION = false;
}
}

[bobslaede]

Fixed it a bit, and used the original positionfixed test from the docs for regular browsers, it could be cleaned up a bit more, but it works.
Tested in Chrome, Firefox, IE9, iOS4, The Android 2.3.3 browser, and Firefox for Android

Modernizr.addTest('iospositionfixed', function () {
    var test  = document.createElement('div'),
        ret,
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    if (typeof document.body.scrollIntoViewIfNeeded === 'function') {

        var oldCssText = root.style.cssText,
            testScrollTop = 20,
            originalScrollTop = window.pageYOffset;

        root.appendChild(test);

        test.style.cssText = 'position:fixed;top:0px;height:10px;';

        root.style.height="3000px";

        /* avoided hoisting for clarity */
        var testScroll = function() {
            if (ret === undefined) {
                test.scrollIntoViewIfNeeded();
                if (window.pageYOffset === testScrollTop) {
                    ret = true;
                } else {
                    ret = false;
                }
            }
            window.removeEventListener('scroll', testScroll, false);
        }

        window.addEventListener('scroll', testScrollTop, false);
        window.setTimeout(testScroll, 20); // ios 4 does'nt publish the scroll event on scrollto
        window.scrollTo(0, testScrollTop);
        testScroll();

        root.removeChild(test);
        root.style.cssText = oldCssText;
        window.scrollTo(0, originalScrollTop);

    } else {
        ret = Modernizr.positionfixed; // firefox and IE doesnt have document.body.scrollIntoViewIfNeeded, so we test with the original modernizr test
    }

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

EDIT: Here's a gist of them both: https://gist.github.com/1221602

[torbs]

I did the timeout/eventlistener to test on Android devices for scrollIntoViewIfNeeded. If testScroll() is called right after scrollTo() and it works, the timeout and eventlistener is not needed. I will test this later. I don't have an Android available right now.

I found out after publishing my code here, that we need to test further on Android devices with user-scalable set to "yes". My test returns true if the timeout is set to a higher number, but Android doesn't render posistion fixed on scalable viewports.

[bobslaede]

Very good to know. My test on android was with user-scalable set to "no".

[torbs]

Just tested on an IOS beta 5. The eventlistener is necessary for iPhone IOS5 to return true. Calling testScroll() directly will return false.

[torbs]

It is also necesarry to do the test onload.

[paulirish]

torbs, is your code above final?

we should start a pull request if so

[torbs]

paulirish, this works for ios:

    var mno = {};
    mno.features = (function () {
        var features = {
            positionFixed: function (callback) {
                if (typeof fixed.vaule === 'undefined') {
                    fixed.callbacks.push(callback);
                } else {
                    callback(fixed.value);
                }
            }
        },
        fixed = {
            value:undefined,
            callbacks:[]
        };

        function runFixedCallbacks() {
            for (var i = 0; i < fixed.callbacks.length;i++) {
                fixed.callbacks[i](fixed.value);
            }
        }

       $(window).load(function () {
           var test  = document.createElement('div'),
               control = test.cloneNode(false),
               root = document.body,
               oldCssText = root.style.cssText;

           if (typeof root.scrollIntoViewIfNeeded === 'function') {

               var testScrollTop = 42,
                   originalScrollTop = window.pageYOffset;

               root.appendChild(test);

               test.style.cssText = 'position:fixed;top:0px;height:10px;width:100%;background:#900';

               root.style.height="3000px";

               /* avoided hoisting for clarity */
               var testScroll = function() {
                   window.removeEventListener('scroll', testScroll, false);
                   if (fixed.value === undefined) {
                       test.scrollIntoViewIfNeeded();
                       fixed.value = (window.pageYOffset === testScrollTop);
                   }

                   root.removeChild(test);
                   root.style.cssText = oldCssText;
                   window.scrollTo(0, originalScrollTop);
                   runFixedCallbacks();
               };

               window.addEventListener('scroll', testScrollTop, false);
               window.scrollTo(0, testScrollTop);
               window.setTimeout(testScroll, 15); // ios 4 doesn't publish the scroll event on scrollto

           } else {
               root.style.cssText = 'padding:0;margin:0';
               test.style.cssText = 'position:fixed;top:42px';

               root.appendChild(test);
               root.appendChild(control);

               fixed.value = test.offsetTop !== control.offsetTop;
               root.removeChild(control);
               root.removeChild(test);
               root.style.cssText = oldCssText;
               runFixedCallbacks();
           }



       });

       return features;
    }());

[jokeyrhyme]

So this is part of jQuery 1.7. Cool.

Is it worth programming Modernizr to detect jQuery and use the result from its tests (and vice versa) where they overlap and one is loaded before the other? Or is it faster to mess with the DOM twice over for this feature-detect than it would be to test for an existing result?

[paulirish]

the detect in jquery 1.7 gives a false positive for mobile webkit.

[arxpoetica]

BUMP! BUMP! ;)

[paulirish]

if anyone wants to try torb's latest code.. and test it against some ios/android/op mobile devices.. that'd be great.

then we can bring it in.

its all you, rob. :)