Unable to close popup in Android 2.3 if transition was used when opening it

[andergrim]

I have a popup on my page that works fine on desktop browsers and on iOS Safari. However, in Android the behaviour is quite strange.

I open the popup with the following button in the header of my page:

<a href="#menu_login" data-rel="popup" data-icon="grid" data-transition="pop">Menu</a>

The popup opens fine, but on Android it won't close when I click outside it. If I close it by following a local link within the popup it works, but the next time I want to open the popup the button won't work.

I also tried overriding the fallback for the pop-transition with "none" without success.

The only way to make the popup work in the Android 2.3 stock browser is to remove the data-transition attribute from the button triggering the popup.

[gabrielschulhof]

Can you please try to perform the same steps with the buttons in the "Setting Transitions" section of the popup documentation? Does the popup invoked by the various buttons in that section also fail to close when you click outside it?

[andergrim]

The popups in the documentation works fine, just the way they should.

So, this is a complete page from my code. The documents consists of a couple of pages just like this one (but with other ids for the popup and pages of course).

<div data-role="page" id="mypage"> 
    <div data-role="header" data-position="fixed">
        <a href="#menu_mypage" data-rel="popup" data-icon="grid" data-transition="pop">Menu</a>
        <span class="ui-title" />
    </div><!-- Header -->
    <div data-role="content">
        My page info goes here
    </div><!-- Content -->
    <div data-role="popup" id="menu_mypage">
        <ul data-role="listview" data-dividertheme="a" class="mobileMenu">
            <li data-icon="false"><a href="#test">Test</a></li>
            <!-- couple of more li elements here -->
        </ul>
    </div>
</div><!-- #mypage -->

Before jQM is loaded I override the transition fallbacks in another script:

$(document).bind("mobileinit", function(){
    $.mobile.defaultPageTransition = 'slidedown';
    $.mobile.transitionFallbacks.slidedown = 'none';

    $.mobile.transitionFallbacks.pop = 'none';
});

[arschmitz]

Does this jsbin represent you case http://jsbin.com/uzaret/337/edit ? I can replicate you issue on this page. The problem though is that it is looking for a css transition named "none" if you want the fallback to be no transition set it to "" like in http://jsbin.com/uzaret/342/edit in this one your problem no longer happens for me.

[andergrim]

Yes, the first example is a correct replication of the issue I'm having and the second example works fine in my Android 2.3 Browser.
I believe the documentation at http://jquerymobile.com/test/docs/pages/page-transitions.html should be corrected (use of "" vs. "none" for defining the fallback transition). Thanks for taking the time investigating the issue!

[toddparker]

Thanks @arschmitz! @andergrim, I just check that docs page and it uses "none" in the example:
$.mobile.transitionFallbacks.slideout = "none"

Closing as resolved.

[jaspermdegroot]

@toddparker - According to @arschmitz's examples it doesn't work with "none" like we say in the docs, but only when you set it to an empty string. So I think this is still something we should look into.

[arschmitz]

@toddparker @uGoMobi yes i couldent find it in the docs did now though and yes it should be updated in the docs to show "" instead of "none" since this breaks.

[toddparker]

Ah, sorry. I mis-read this. Seems like we need to check the JS, not the docs here. "none" is how if should work. Re-opening.