sliding page in mobile web application

Question

In jquerymobile there is a slide transition when next/prev pages are shown, but on iPhone4 its behavior/animation is like this
--next button clicked
--Url bar is shown
--whole page is moved down
--next page is shown (by slide transition)
--Url bar hides again
--whole page is moved up

How to avoid this show/hide of url bar (and page moves up/down) while moving to next page.

Answer 1

I believe this viewport meta tag will help your problem with the address bar showing (if you are using any of the alpha releases):

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

However support for this was added in the first beta release, my mobile website (using JQuery Mobile 1.0 Beta 1) doesn't show the address bar unless you scroll up to see it on iPhones.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

Or you can download all necessary JQuery Mobile Beta files here:

http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.zip

Note: Setting initial and maximum scales to the same value in the viewport meta tag disables zooming, if you want to allow zoom, just make the maximum scale larger than the initial.

Answer 2

You can try sticking window.scrollTo(0, 1) somewhere which might help.