Skip to content
This repository

Page receives display:none after samePageTransition #4078

Closed
storm opened this Issue · 15 comments

9 participants

Holger Storm Todd Parker Maurice Gottlieb Jasper de Groot tza mirko77 Hansen Alexander Schmitz Scott Jehl
Holger Storm
storm commented

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

Todd Parker

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.

Holger Storm
storm commented

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.

Todd Parker

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

Maurice Gottlieb

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

Holger Storm
storm commented

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

Maurice Gottlieb

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

Jasper de Groot
Collaborator

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

Jasper de Groot
Collaborator

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

Jasper de Groot
Collaborator

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

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

Hansen

'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?

Jasper de Groot
Collaborator

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

Alexander Schmitz arschmitz closed this issue from a commit
Alexander Schmitz arschmitz Transitions: Make sure page has active class after non-sequential sam…
…e page transition Fixes #4078 - Page receives display:none after samePageTransition
80eabd1
Jasper de Groot
Collaborator

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

Alexander Schmitz
Collaborator

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

Alexander Schmitz arschmitz referenced this issue from a commit
Alexander Schmitz 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
Alexander Schmitz arschmitz closed this issue from a commit
Alexander Schmitz 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
Alexander Schmitz arschmitz referenced this issue from a commit
Alexander Schmitz arschmitz Transitions: Make sure page has active class after non-sequential sam…
…e page transition Fixes #4078 - Page receives display:none after samePageTransition
c6267bd
Alexander Schmitz arschmitz referenced this issue from a commit
Alexander Schmitz 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
Something went wrong with that request. Please try again.