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

andergrim opened this Issue Oct 17, 2012 · 8 comments


None yet

5 participants


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.


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?


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 -->
</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';

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.


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!


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

Closing as resolved.

@toddparker toddparker closed this Oct 23, 2012

@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.


@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.


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.

@toddparker toddparker reopened this Oct 23, 2012
@scottjehl scottjehl pushed a commit that referenced this issue Oct 31, 2012
Scott Jehl Merge branch 'master' into tables
* master: (24 commits)
  [select] Implement _destroy() -- Fixes #4661
  Changing ok out to equal; it is more appropriate for this test
  Changing test to make sure it fails when code change is not there
  Renamed class ui-selectmenu-hidden to ui-popup-hidden -- Fixes #5217
  [popup] Rename function _maybeRefreshTimeout to _expectResizeEvent
  [popup] "detached retina" fix - the window height on iStuff with a retina display seems to fluctuate by one pixel during scroll, causing a spurious resize event right after popup open, even though window size is constant during the entire opening sequence
  Added "mobileinit" handler to set up options
  Changed urlParseRE to ignore space at beginning. This is expected behavior in browsers. This used to result in pages changing to "%20destination.html" instead of the now "destination.html". Fixes issue #4882
  List autodividers: use trim() to avoid issues with newlines and spaces in markup. Fixes #5197. Thanks @demonslord !
  [popup] Initiate resize expectation during orientationchange -- Fixes #5153
  Select: headers of custom select menus shouldn't inherit the popup corner styling. Fixes #5215.
  [popup] Correctly handle the case when the fallback transition is "none" -- Fixes #5189
  [custom select] Mark as closed after dialog closes - Re: #5195 - Thanks martenbohlin
  [slider] Adding new behaviour to widget definition
  [select] Adding new behaviour to widget definition
  [checkboxradio] Adding new behaviour to widget definition
  [formReset] New behaviour that allows form widgets to become aware of the fact that the form they are in has been reset
  [popup] Only rapid-open the popup if it is open -- Fixes #5157
  Updated third-party libs for Backbone/Require Demo App
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment