jumping fixed header IOS & Android RC2 #3984

Closed
webdpro opened this Issue Apr 7, 2012 · 18 comments

Projects

None yet
@webdpro
webdpro commented Apr 7, 2012

When in IOS phonegap going from page to page will result in the fixed header and footer jumping but only when the page has enough items on it to scroll.

When the page is not scrolled (the from page) then they are fine but its like it is resetting the headers on page show but in looking at it, it does do it beforeshow so I'm not sure what the problem could be.

Thanks

@webdpro
webdpro commented Apr 10, 2012

A little update but it seems to happen only with persistant headers, now if I turn them off they will not jump but I have to remove the code from JQM for this to work for some reason it seems to want to always run the persistent header code even with it set to false as well as not having the same ID on headers and footer.

@hobe
hobe commented Apr 21, 2012

Reproducing page: http://jsfiddle.net/GsqfM/ (jQM 1.1 FINAL)

Scroll down on first page, then click on a list item (or 'page 2' in footer nav bar): header bar jumps before displaying content of second page (iOS 5.1). Without scrolling down the header bar doesn't jump. This happens in browser and in fullscreen mode!

The header also jumps using no page transitions!

@jddh
jddh commented Apr 25, 2012

This issue creates quite a hash when combined with #4024 on iOS. It can take multiple seconds for the page to settle and re-align itself after transitioning.

@eugenebond

I can confirm the issue too, I'll try to look into it.

@eugenebond

I think I've found a fix to this one. I'll do some more testing to make sure the fix doesn't interfere with anything and will upload it so that everyone could confirm it.

@eugenebond

Added pull request
#4225

You can test and confirm if it works for you here
http://demos.webscribble.com/jqm_github3/fixed/

@scottjehl scottjehl was assigned Apr 28, 2012
@hobe
hobe commented Apr 28, 2012

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

@toddparker
Contributor

@hobe - What device/version did you test this on and see the blink? I just dropped this code into my local version of the docs and browsed around an it seemed ok.

@hobe
hobe commented May 3, 2012

tested on iPhone 3GS with iOS 5.1 (9B176)

@hobe
hobe commented May 3, 2012

It also flahes on ipad 1 (ios 5.1); forgot to mention: not only the header bar, also the footer bar flashes!

@jaspermdegroot
Member

Like I mentioned in the thread at PR #4225: I made a change in the CSS the other day (commit ee5df39) which might have fixed this issue as well. Can you test with latest code?

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
  <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 
@jaspermdegroot
Member

@webdpro @hobe @eugenebond

Can you let us know if this is still an issue with latest code? Thanks!

@ryankirkman

I'm using the CDN provided versions of 1.2.0 alpha and I still get jumpy fixed headers when moving from page to page.

I am completely re-rendering the markup with backbone and then manually calling $.mobile.changePage if that helps?

@webdpro
webdpro commented Aug 14, 2012

What is? I know android 4 has major issues with fixed header and page
transitions
On Aug 13, 2012 9:46 PM, "Ryan Kirkman" notifications@github.com wrote:

I'm using the CDN provided versions of 1.2.0 alpha and I still get jumpy
fixed headers when moving from page to page.

I am completely re-rendering the markup with backbone and then manually
calling $.mobile.changePage if that helps?


Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/3984#issuecomment-7716179.

@gnesher
gnesher commented Aug 16, 2012

Adding min-height to the content (forcing a small scroll) solved the bug in my case, though it's not a perfect solution.

@scorion
scorion commented Sep 6, 2012

I had the same issue but after removing PhoneGap/Cordova's own CSS, and left only JQuery CSS in the imports, twitching stops.

EDIT: More accurately, my personal problem was changed font-size that made everything jump a bit.

@arschmitz
Member

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

@jaspermdegroot
Member

@arschmitz - Thanks! Closing as fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment