Page receives display:none after samePageTransition #4078

Closed
storm opened this Issue Apr 17, 2012 · 15 comments

9 participants

@storm

A transition from #mypage to #mypage (with allowSamePageTransition set to 'true') will set #mypage's css 'display' to 'none' after the transition is completed.

@toddparker

Do you have transitions off on these pages? We note that turning this on can cause CSS issues with transitions so you need to handle that on your end.

allowSamePageTransition (boolean, default: false)
By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.

@storm

I am using a transition. Is there a list of transitions that support allowSamePageTransition? If I'm not using a transition I might as well just re-render the template.

@scottjehl scottjehl was assigned Apr 26, 2012
@toddparker

@mauriceG - Mind setting up some tests to see which transitions work well with allowSamePageTransition, then helping us add those details to the docs?

@MauriceG

@toddparker sorry for delay.
I've tested the samePage transition on Safari (iOS/Win) and FF (Win) and it seems, just the slide-transition raises this issue.
After change page with slide, the page container keeps the display:none styling because it misses the ui-page-active class.
Demo: http://jsfiddle.net/MauriceG/2vz4G/
A workaround like:
$('#page').bind('pageshow', function(e) {
$(this).addClass('ui-page-active');
});

avoids this behavior but is not a solution.
@storm can you confirm this issue is just raised with the slide transition?
Thanks in advance.

@storm

I'm quite sure I've been using 'slide'.

@MauriceG

@storm Juut ;-)
It seems, at the moment the slide-transition is the only one that does not work with same-page-navigation.

@jaspermdegroot
jQuery Foundation member

See also #4612 (closed as duplicate) about this also happening with transitions other than "slide".

@jaspermdegroot
jQuery Foundation member

See also the information provided in the thread of #3968 (closed as duplicate).

@jaspermdegroot
jQuery Foundation member

Issue #4687 has been closed as duplicate. The ticket has a test page and that shows an issue with allowSamePageTransition whithout transition "slide".

@tza
tza commented Jun 4, 2013

I ran into the same issue, calling changePage to same pageId (hash, transition slide, samePageTransition true) results in a blank page. As stated above, the active page class is removed. Since this issue already provides a test case like mine, I simply add my comment here.

If you check issue #2529, this was already fixed with a simple if check in a previous version of JQM (commit: ca9df11).

Looking at the code, which removes the activePageClass in JQM 1.3.1, this is called via transitionHandler -> doneIn() -> cleanFrom(). I've added the same if statement from issue #2529 to the function doneIn(), and the blank page is not shown anymore.

Maybe I'm missing something, since I'm not really into JQM. But I hope this helps to find/fix the blank page issue.


var createHandler = function (sequential) {
...
doneIn = function() {
if ( !sequential ) {
// if ( $from ) { // replace line 3735 with
if ( $from && $from[0] !== $to[0] ) { // check from issue #2529
cleanFrom();
}
}

@mirko77

Same here. It has not been fixed yet so I am using these lines on my event handlers:

//@bug: slide transition to same page makes page disappear - http://bit.ly/13Fpyr6
$(this).addClass('ui-page-active');
//--------------------------------------------------------------------------------

@shenlong

'Cannot call method '_trigger' of undefined' is fixed in 1.4.0, $.mobile.changePage to Page2.html and performing $.mobile.changePage('#', { transition: 'slide', allowSamePageTransition: true).

However, after upgrading from 1.3.2, $(this).addClass('ui-page-active'); hack does not work. Any workaround?

@jaspermdegroot
jQuery Foundation member

7883326 in branch "issue-4078" should fix the issue with the active page class. However, we have to look into this issue #6382 (comment).

@arschmitz arschmitz was assigned Aug 28, 2013
@arschmitz arschmitz added a commit that closed this issue Sep 23, 2013
@arschmitz arschmitz Transitions: Make sure page has active class after non-sequential sam…
…e page transition Fixes #4078 - Page receives display:none after samePageTransition
80eabd1
@arschmitz arschmitz closed this in 80eabd1 Sep 23, 2013
@jaspermdegroot
jQuery Foundation member

@arschmitz - Is this commit 7883326 in branch "issue-4078" no longer needed?

@arschmitz
jQuery Foundation member

need to see why new page is not being pulled on same page transition

@arschmitz arschmitz added a commit that referenced this issue Oct 2, 2013
@arschmitz arschmitz Pagecontainer: send samePage param to pagehide event so page widget c…
…an check this and not remove page if true Fixes #4078 - Page receives display:none after samePageTransition
9b33536
@arschmitz arschmitz added a commit that closed this issue Oct 3, 2013
@arschmitz arschmitz Pagecontainer: send samePage param to pagehide event so page widget c…
…an check this and not remove page if true Fixes #4078 - Page receives display:none after samePageTransition
93d0bf8
@arschmitz arschmitz closed this in 93d0bf8 Oct 3, 2013
@arschmitz arschmitz added a commit that referenced this issue Nov 18, 2013
@arschmitz arschmitz Transitions: Make sure page has active class after non-sequential sam…
…e page transition Fixes #4078 - Page receives display:none after samePageTransition
c6267bd
@arschmitz arschmitz added a commit that referenced this issue Nov 18, 2013
@arschmitz arschmitz Pagecontainer: send samePage param to pagehide event so page widget c…
…an check this and not remove page if true Fixes #4078 - Page receives display:none after samePageTransition
bf339aa
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment