Swipe panel with default transition none not run properly

[knobli]

I use the new version of jquery mobile (1.4.4) and have some html files, which I'm linking with a swipe navigation. The default transition is set to none and if I click on a link the main page is loaded correctly but if I click on the second page on the navigation the page background color will be black and the navigation is overlaying the page.

In the jsfiddle I create a multi page, but the issue looks the same.
http://jsfiddle.net/knobli/yh7guzvu/4/

I try to fix it with an own transition (referring to http://stackoverflow.com/a/22576986/2136148) and it looks like that this solve the issue:
http://jsfiddle.net/yh7guzvu/8/ (slow loading)
http://jsfiddle.net/yh7guzvu/6/ (overwrite fade)

[arschmitz]

@knobli there is nothing in your fiddle that implements swipe navigation only swipe to open the panel which seems to work fine. and the transition none from the button in the panel works fine too. Also the SO question you link to is something that was fixed in 1.4.2 and also not about swipe navigation. Im closing this as cant reproduce / incomplete.

[knobli]

@arschmitz do you click on the navigation button or swipe on the second page (Training)?

1. Click on navigation button
2. Click on 'Training'
3. Swipe or click on nvaigation button
   Result: black background and navigation overlays the header

[arschmitz]

@knobli there is no way in your fiddle to swipe to a new page you have nothing implementing this. I have followed these steps and cannot reproduce the issue you are talking about. what browser are you using what version?

[knobli]

@arschmitz you're right, you can not swipe to another page, put you can swipe to open the navigation. The title of the issue is maybe wrong, but there is an issue with the "split"-navigation combined with "none" transition (please note the picture)

It shoud look like this:

[arschmitz]

@knobli this is what iv been doing the whole time and i cannot reproduce. Again what browser/device/version are you using to see this?

[knobli]

Windows 7

Google Chrome Version 37.0.2062.120 m
Internet Explorer 11.0.9600.17239
Firefox 32.0.3

[arschmitz]

I'v checked all these and I cannot reproduce this issue. Page loads everything is fine, I open the panel ( via button or swipe ) click the link next page loads with no transition and everything looks fine. Not sure why your seeing this and I can't reproduce.

[knobli]

@arschmitz I check this with some friends and they have the same issue at this jsfiddle example. Do you open the navigation after landing on the 'Training'-site again?

[Ruffio]

how about record what you do and the outcome? you can try using (free) Fraps: http://www.fraps.com/

[knobli]

@Ruffio

1. I open the navigation on the 'News' page
   
2. I click on the link 'Training'
3. The 'Training' page appears, everything looks good
4. I click on the nvaigation on the 'Training' page
   

I would expect that it looks like this:

I also capture the procedure (swap and with navigation): http://knob.li/jquery_mobile_issue.avi

[Ruffio]

I see your point. The first time the (News) page is moved to the right
along as the panel moves in from the left. The second time the (Training)
page just stays still and the panel moves in from the left above the page.

I used FX 32.0.3

Venlig hilsen Rasmus Christiansen

2014-09-26 14:51 GMT+02:00 Raffael Santschi notifications@github.com:

@Ruffio https://github.com/Ruffio

1. I open the navigation on the 'News' page [image:
   open_navigation_first_time]
   https://cloud.githubusercontent.com/assets/1853643/4420575/3cc0c6ae-457b-11e4-8fe5-9f1d16c7732c.png
2. I click on the link 'Training'
3. The 'Training' page appears, everything looks good
4. I click on the nvaigation on the 'Training' page [image:
   open_navigation_second_time]
   https://cloud.githubusercontent.com/assets/1853643/4420586/5f62c5fe-457b-11e4-96ae-a2549cd1cbb4.png

I would expect that it looks like this:
[image: open_navigation_second_time_correct]
https://cloud.githubusercontent.com/assets/1853643/4420590/71ea0390-457b-11e4-9195-3f1c2d08fb9d.png

I also capture the procedure (swap and with navigation):
http://knob.li/jquery_mobile_issue.avi

—
Reply to this email directly or view it on GitHub
#7711 (comment)
.

[knobli]

@arschmitz could you please reopen the issue?

[arschmitz]

I can reproduce this now. The issue is not quite as it seems though. The problem is the second page is not animating when the page should slide over to reveal the panel it is never moving on the second page its the same with push and reveal panels. However overlay panels work fine because they don't animate the page only the panel.

[wxfbiubiu]

I have a similar problem.When set 'defaultPageTransition' as 'none', external panel has a incorrect behavior.Other defaultPageTransition option is OK.
I have tested this problem on Chrome and Safari.
Sample:http://jsbin.com/guhoxibupaqi/1/edit

You can reproduce this problem as the following steps：
1.Click the left icon, and the left panel shows；


2.Click the “Dog” on the left panel , and the Dog page shows;

3.Again, Click the icon. The Dog page content change black.It's increct;

4.Let the left panel close,the black area animate slowly.

[gabrielschulhof]

I got this. The problem is with the open-page tracking we've added. External panels store a reference to the currently-open page when they open, and null the reference when they close.

The problem is, if you navigate away from the page, the nulling-out happens after the _getWrapper() function which gets called as the pageshow handler has already used the reference to retrieve the wrapper. Thus, it retrieves the wrapper from the old page instead of finding that there is no wrapper on the new page, meaning that it has to generate one.

The upshot is that, when you navigate to the second page, the panel uses the wrapper from the first page instead of generating a wrapper for the second page.

The quick fix is to null-out the reference to the current page from the pageshow handler and only then call _getWrapper() to update the wrapper.

The proper fix would be to take a long, hard look at open/close/close-immediately lifecycle management for both the panel and the popup, factor out common behaviour patterns, and provide a generic extension used by both panel and popup. The extension would allow both panel and popup to correctly react to page change events, executing the right things in the right order, being asynchronous where asynchronicity is needed, while synchronizing those portions of the code which need to be synchronized.

Popup already does this, but in a popup-specific way, so that should be factored out to work for both popup and panel.

This, in turn, will most likely segue into a panel rewrite :)

[gabrielschulhof]

... and to ramble on even more:

The root cause of this is that, the function complete() which resides inside the panel's public close() function gets called via a stack-unwind if the panel is to close immediately. It is the job of this complete() function to null-out the opened-page reference, but this happens too late. When there is no transition between the pages, the pageshow happens synchronously, so the stack-unwind doesn't have a chance to fire and thus to null-out the stored reference.

Whereas when there is a transition between the pages, the stack-unwound complete() method has a chance to run during the time of the transition, resetting the stored reference, and so the panel correctly updates the wrapper on the destination page.