Non-fixed, persistent external toolbars: improper transitions

[clifforama]

With multiple "single" jQM pages, navigating from one page to another can result in improper transitions of the toolbars when the toolbars are persistent, external and non-fixed. For example:

http://jsbin.com/huvoraba/80
http://jsbin.com/huvoraba/81

Starting from the first page, click on the link therein to navigate to page 2. During the transition, you can see two instances of the header, while the footer disappears altogether. After the transition, both header and footer appear correctly. Navigating back to page 1 via back button, the header seems OK (i.e. it persists without any transition effect), but the footer again disappears until after the transition.

The same transition problem can also be triggered with the back button by navigating to page 2 again; reload; then hit the back button.

There are no transition issues when the toolbars are fixed, in which case they remain persistent throughout page transitions.

Note that in some browsers (e.g. Firefox 31.0 for Windows, Chrome 36.0.1985.125 m for Windows, Chrome 36.0.1985.135 for Android), the JS Bin pages will sometimes show multiple instances of "\n" in the content. I think they're somehow caused by JS Bin. Nevertheless, they are unrelated to this toolbar transition issue, and the issue exists (without smatterings of "\n") on sample pages outside JS Bin.

[ldeluca]

@clifforama You're linking to an external 2nd page href="http://jsbin.com/huvoraba/81" so it's doing a complete new load not loading a second page within the content window. I think this is behaving as expected given the code. See my video. When you say there are multiple headers it's actually just the footer under the header with no content until the content loads then it shows the footer fixed to the bottom as it should be. https://www.youtube.com/watch?v=6cW_gqTHIzU&feature=youtube_gdata_player

[arschmitz]

@clifforama I can confirm this issue we have tried lots of ways to work around this without much luck but i just had an idea that seems to be working well http://jsbin.com/dunuza/6/edit basically set them to fixed so that the page accounts for padding for them and then use css to change the display to relative / absolute.