Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
andergrim opened this Issue · 8 comments

5 participants

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

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
Owner

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.

@toddparker toddparker closed this
@jaspermdegroot
Collaborator

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

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

@toddparker toddparker reopened this
@scottjehl scottjehl referenced this issue from a commit
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
  Whitespace
  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
  ...
ecec15c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.