Have setup a small Mobile App using JQuery Mobile. Kindly find it in following link. Need your help to resolve three issues as described follows.

https://jsfiddle.net/supabitra/hceza13o/

Issue 1: "Nav-Panel disappearing from Root Page:"

Steps to reproduce:

1.       Click JSFIDDLE link. Note that the Nav-Panel has few tabs - Page 1, 2, etc.

4.       Click the back button at left-top of Sub Page header

5.       Land back to Root Page.

At this point, the Nav-Panel at Root Page will appear for a fraction of a second and then disappears completely.

Issue 2: “Ugly screen flicker with dynamically appended buttons using JQuery”

Steps to reproduce:

1.       Click JSFIDDLE link.

2.       Click the button at left-top of Root Page header

3.       Click “Goto Sub Page” button

At this point, before landing in Sub Page, a temporary Form Header section appears displaying both the dynamically added buttons along with the Header Title – all components appearing Vertically. This screen will be visible for a fraction of a second and then the screen refreshes to set the components in right positions.

Is there any way this ugly flicking of the screen can be avoided?

One point to highlight: This flickering does not occur for the first iteration, but it starts only from the second iteration, i.e. from the second attempt!

Issue 3: “Static Page Footers gets overlapping”

Steps to reproduce:

1.       Click JSFIDDLE link.

2.       Click the button at left-top of Root Page header

3.       Click “Goto Sub Page” button; which will land up in Sub Page

4.       Click the back button at left-top of Sub Page header

5.       Land back to Root Page.

At this point, the Footer Root Page and Footer Sub Page – both will be visible at the same time, overlapping each other. Note, the overlapping is not in Sub Page, but only in Root page; and additionally, the Footer Sub Page loses its format of background color too.

Any help in resolving these issues will be really helpful! Thank you.