OffCanvas + .has-flyout dropdown closes canvas upon expanding

[zumajoe]

Testing http://themefortress.com/demo/ on iOS6, if you select a dropdown menu the Off Canvas closes before you can make a choice.

Strangely, after you have attempted this, go ahead and re-open the Off Canvas, and you can then toggle .has-flyout up and down.

[zumajoe]

The culprite lies within the resize function inside jquery.offcanvas.js.

On line 27, go ahead and comment out that line and you will see the issue stops.

$(window).resize(function() { // $('body').removeClass('active'); var $selector4 = $('#topMenu'); if ($selector4.length > 0) $selector4.css("margin-top", $selector4.height() * -1); });

However, we are now left with a botched layout when we resize the browser window.

[zumajoe]

And here is a great workaround, bravo!

https://github.com/zurb/foundation/issues/786

$(window).resize(function() {

var $selector6 = $("[role='complementary']");
if ($selector6.length > 0) {
    //throttle for resize checking.
    var resizeOK = true, 
    resizeTimer = setInterval(function () {
        resizeOK = true;
    }, 250);
    $(window).resize(function() {
        // if (!navigator.userAgent.match(/Android/i)) $('body').removeClass('active');
        if (resizeOK === true) {
            resizeOK = false;
            if( $selector6.css('display') == 'none' ){ $('body').removeClass('active'); }
            console.log( $selector6.css('display') );  //for debugging.
        }
    });
}

});