Skip to content

Loading…

Issue 3984: jumping fixed header IOS & Android RC2 #4225

Closed
wants to merge 1 commit into from

7 participants

@eugenebond

Fix for
#3984

I've done some searching and the problem appears to be a Safari bug; however it's hard to say that for sure . The fix is to do scrollTop(0) between page transitions which probably resets Safari viewport and prevents nasty jumps/blinks/etc when Safari tries to settle down the newly loaded position:fixed header/footer.

I'd appreciate if someone with more JQM experience could review the fix and confirm that it doesn't break anything. I am new to this framework and don't have a clear picture of every JQM feature so I could have easily broken something.

@toddparker

I just tested this under iOS5 and it does seems to help with the issue of the toolbars popping up in the middle of the page, then snapping into view. I'd like others to give this a go, but it looks good. Thansk @eugenebond!

@hobe

seems to work using no page transitions. Using page transitions the header bar flashes (fade out and in again)!

@toddparker

@scottjehl - I'd like your eyes on this PR.

@scottjehl

Sure thing. So, the reason this works is because it jumps to top before the transition starts. Because of this, you'll see a visible jump-to-top before the FROM page transitions out. In the past, we've done all we can to avoid doing this, so I'm not sure I'd consider this a valid fix. It fixes this issue while causing another, which perhaps more noticeable depending on the content on the page.

Todd, if you think it's worth the tradeoff to jump to top before the transition, I'd at least suggest that this code is qualified to only affect persistent toolbars in app mode (phonegap, webview, bookmarked, etc).

Something like this maybe, at the same line number...

// https://github.com/jquery/jquery-mobile/issues/3984
// scrollTop(0) forces Safari viewport to the top of the page
// which prevents the position:fixed toolbar from blinking during page transition in standalone mode
if( window.navigator.standalone && $el.jqmData( "id" ) ){
    window.scrollTo( 0, $.mobile.defaultHomeScroll );
}
@toddparker

@scottjehl - I see your point, if we did anything we'd want to scope this way down but I wonder if this is ultimately going to be something a dev would need t decide to add it. @hobe and @eugenebond - mind trying out Scott's suggested fix and reporting back?

@silentrob

@toddparker I tried the fix (both the original and @scottjehl) and neither seems to have any effect. iOS 5.1 + JQM 1.1 using PhoneGap. Transitions set to "none". Once the from page has been scrolled even slightly the fixed header on the to page is offset down (about the scroll distance) and then popped into place. I agree that even if the fixed worked, it would not be ideal if there are transitions set.

@jaspermdegroot
jQuery Foundation member

I made a change in the CSS the other day (commit ee5df39) which might have fixed #3984 as well. Can you test with latest code?

@arschmitz
jQuery Foundation member

Testing on ios5 in webview this is fixed in latest assuming by commit ee5df39

@jaspermdegroot
jQuery Foundation member

@eugenebond - Thanks a lot for your work on this PR. I am closing it because it turned out the issue has indeed been fixed by my commit..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 27, 2012
  1. @eugenebond
This page is out of date. Refresh to see the latest.
Showing with 5 additions and 0 deletions.
  1. +5 −0 js/jquery.mobile.fixedToolbar.js
View
5 js/jquery.mobile.fixedToolbar.js
@@ -122,6 +122,11 @@ define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.core", "./jquery.
// This method is meant to disable zoom while a fixed-positioned toolbar page is visible
$el.closest( ".ui-page" )
.bind( "pagebeforeshow", function(){
+ //https://github.com/jquery/jquery-mobile/issues/3984
+ //scrollTop(0) apparently forces Safari viewport to the top of the page
+ //which prevents the position:fixed toolbar from blinking during page transition
+ $('body, html').scrollTop(0);
+
if( o.disablePageZoom ){
$.mobile.zoom.disable( true );
}
Something went wrong with that request. Please try again.