Page Jumps 1px on page transition (iOS)

[jwlms]

I'm developing in the iOS simulator and when linking to other pages, the transition jumps down 1px before the transition and the page remains 1px lower after the transition is finished. Here's a pic: http://tucsonlabs.com/josh/jquery-mobile-bug.png

[johnbender]

@tucsonlabs

We scroll down one pixel on load to hide the nav bar. You can disable this behavior if you like by setting $.mobile.defaultHomeScroll to 0 in a document ready binding added after the jquery mobile javascript is included in your document.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
  $(function() { 
    $.mobile.defaultHomeScroll = 0;
  });
</script>

Keep in mind that this likely won't work for the first page load (let me know if it does) and it will disable the navbar hide. If you give it a try and we can justify the use case I can add a ||= in there to prevent redefinition before the first page is loaded.

[johnbender]

@tucsonlabs

It looks like your organization has experience with this technique :D

http://tucsonlabs.com/1606/hiding-the-iphone-url-bar/

[jwlms]

Thanks John,

Setting $.mobile.defaultHomeScroll = 0;
did the trick. I believe it's working on first load as well.

Cheers,

Josh

On Tuesday, October 25, 2011, John Bender <
reply@reply.github.com>
wrote:

@tucsonlabs

It looks like your organization has experience with this technique :D

http://tucsonlabs.com/1606/hiding-the-iphone-url-bar/

Reply to this email directly or view it on GitHub:
#2846 (comment)

[jake-nz]

I believe the value for defaultHomeScroll should be 0 for iOS but the experiment to determine the value fails when the page is too short to scroll.

[robsonselzelin]

Hi everyone,

I'm sorry for reopen this thread, but the 1px jump during page transitions is still happening on jQuery Mobile 1.4.5, at least on the following environment:

• Galaxy X (Android Jelly Bean 4.1.1)
• Galaxy S3 (Android Ice Cream Sandwich 4.3)
• Phonegap 3.5.0-0.21.14 (Android WebView component (Android native browser))
• jQuery 1.11.1
• jQM 1.4.5

It was already happening on jQM 1.3.2 and I thought it would be fixed in 1.4.x, but the issue persists.

My fix is change each page's top position -1px and increase document min-height 1px, overriding jQM's resetActivePageHeight() function :

HTML:
div data-role="page" style="top: -1px;"

JS:
$.mobile.resetActivePageHeight = function resetActivePageHeight( height ) {
var page = $( "." + $.mobile.activePageClass );
page.css( "min-height", $(document).height() + 1);
}

I still don't know if that happens on iOS nor Windows Phone 8, I'm gonna check that later.

Issue test page: http://easytef.com/mobile/1pxjump/index.html

My fix test page: http://easytef.com/mobile/1pxjump/fixed/index.html

Accessing the first link directly by Android's native browser you can see the address bar going up and down. Inside Phonegap's app, it results in the entire page going down 1 pixel.

[ugljanin]

I have fixed header, and my footer is set to absolute to bottom. I have problem with lifting for 1px while page transition. I tried this solution above, and if fixes it, but my footer disapear. Is there any other solution?