Swipe panel with default transition none not run properly #7711

Closed
knobli opened this Issue Sep 23, 2014 · 16 comments

Projects

None yet

6 participants

@knobli
knobli commented Sep 23, 2014

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
Member

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

@arschmitz arschmitz closed this Sep 25, 2014
@knobli
knobli commented Sep 25, 2014

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

@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
knobli commented Sep 25, 2014

@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)
open_navigation_second_time

It shoud look like this:
open_navigation_first_time

@arschmitz
Member

@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
knobli commented Sep 25, 2014

Windows 7

Google Chrome Version 37.0.2062.120 m
Internet Explorer 11.0.9600.17239
Firefox 32.0.3

@arschmitz
Member

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
knobli commented Sep 26, 2014

@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
Ruffio commented Sep 26, 2014

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

@knobli
knobli commented Sep 26, 2014

@Ruffio

  1. I open the navigation on the 'News' page
    open_navigation_first_time
  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
    open_navigation_second_time

I would expect that it looks like this:
open_navigation_second_time_correct

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

@Ruffio
Ruffio commented Sep 26, 2014

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
knobli commented Sep 28, 2014

@arschmitz could you please reopen the issue?

@arschmitz
Member

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.

@arschmitz arschmitz reopened this Sep 28, 2014
@arschmitz arschmitz added this to the 1.4.5 milestone Sep 28, 2014
@77hzdotcn

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
Contributor

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
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment