test for overflow-y:auto returning true on android < 3 even though it doesnt work

Question

im developing a webapp for android. At a place i need to find whether overflow-y:auto is supported or not in the browser because i need to scroll a div.
But tests for this return true in android < 3, telling that its supported, but when used it doesnt work the way its expected, i.e., the div with

overflow-y:auto 

doesnt scroll.

Is there any credible way to see if this property is supported in a browser. i wrote this test using modernizr, but it always returns true, meaning that its supported.

Modernizr.addTest('overflowauto', function(){
var bool = false;
var testProp = "overflow-y";
var testVal = "auto";
var styles = Modernizr._prefixes.join(testProp + ":" + testVal + "; ");
var ret = true;
ret =  Modernizr.testStyles('#modernizr { '+styles+' }', function(elem, rule){
    for(var i = 0; i < Modernizr._prefixes.length; i++) {
        bool = (window.getComputedStyle ?
                getComputedStyle(elem, null) :
                elem.currentStyle)[Modernizr._prefixes[i] + testProp] == testVal;

        if(bool) break;
    }

    return bool;

});
return ret;

});

But clearly its not working when i use it. Please tell me a credible way to find if the property is safe to use, or what can i do about it.

Answer 1

You can try this:

Modernizr.addTest("overflowscrolling",function(){
    return Modernizr.testAllProps("overflowScrolling");
});

Then check for the overflowscrolling or no-overflowscrolling class that Modernizr will insert into the html element in the DOM. This seems to work correctly for iOS and Android devices. (Or just check the value of Modernizr.overflowscrolling directly.)

Because overflowscrolling is specific to certain browsers/devices (e.g., recent iPhones), I check for Modernizr.touch as well. If it's not a touch device, I assume it can handle overflow scrolling. Since Androids are touch devices, they will be tested with Modernizr.overflowscrolling but you don't have to test, say, Chrome on a laptop (which will return false but can handle overflow:auto just fine).

So the test may be imperfect, but it seems to do the right thing for all the use cases I care about that I've tested: All modern desktop browsers, recent iPhones, and Android 2.X devices. If you have a wider array of devices/browsers to support, you'll have to test those and tweak as appropriate.