I am developing an application using jQuery Mobile and Phonegap. The problem is that when I make a transition to the page, the incoming page is first displayed incorrectly (the DOM elements are not in the correct position or the desired size), then, as soon as the transition is completed, the elements change and move to the correct position, (In addition, forwarding the page also does not display correctly before it comes out). I tested this using transitions with fade out and slide (in the end I would like to switch to slide transition).
Here is jsFiddle illustrating the problem:
http://jsfiddle.net/fz7qs/2/
I also use div as the page container, so the whole page does not go immediately, but only the contents of the div container.
I use css percentages for almost everything (height, width, margins, etc.) so that the application scales to different device sizes. In addition, I use javascript to center some elements (triggered by an event on the page). I think these percentages are part of the problem. I built a simple test on a desktop browser (picking up the handset) and set a fixed height in the page container. This seemed to fix the problem, but when I tried it on my phone, the problem was still there.
Each page in the application is preloaded into the DOM using $ .mobile.loadPage (). I decided that if I preload them, the percentage height will refer to the parent (page container div), and the transitions should look right.
Looking further into JQuery Mobile, I found that during the transition, the page height was set to an empty string. I tried to comment on this line to check if it will work with percentage heights. Again, it worked on my desktop, but not on the phone.
I am using Android phonegap (API level 8 - Android 2.2) on Samsung Galaxy Nexus for testing.
Is it possible to use css and javascript binding before page transition while keeping percent based values?
index.html
<body> <div id="mainHeader">This is a header</div> <div id="pageContainer"> <div data-role="page"></div> </div> </body>
page1.html
<body> <div data-role="page" id="page1"> <div class="subheader"> <div class="backButton"></div> <div class="subheaderText">Settings</div> <div class="helpButton"></div> </div> </div> </body>
Matching css
#pageContainer { overflow: hidden; width: 100%; height: 86.772486772486772486772486772487%; } .ui-mobile [data-role="page"] { min-height: 0px !important; color: white; position: relative; width: 100%; height: 100%; background: #868a73; } .subheader { width: 100%; height: 10.16260162601626016260162601626%; background-color: #000; display: inline-block; text-align: center; position: relative; } .backButton { background: url("images/back_button.png"); background-size: contain; background-repeat: no-repeat; display: inline-block; float: left; width: 8.888888888888888888888888888889%; height: 52%; margin-left: 5.555555555555555555555555555556%; } .subheaderText { color: #FFF; font-size: 2.45em; font-weight: bold; display: inline-block; } .helpButton { float: right; background: url("images/help_button.png"); background-size: contain; background-repeat: no-repeat; display: inline-block; width: 8.888888888888888888888888888889%; height: 64%; right: 5.555555555555555555555555555556%; }