Persistent navbar jumps on iPhone device

[ChristianWeyer]

I know that this seems to be an issue with the current jQM 1.0b3 build - all looks fine on desktop Chrome, on desktop safari, but jumps on iOS Safari. Any idea how to fix this?

Thanks.

[frequent]

what do you mean by jumping? I just inserted b3 and tried to find something. On iPad all looks normal. On Android there is a strange effect on transitioning. Looks like the navbar being lifted briefly and then dropped again. Do you mean this?

[ChristianWeyer]

Yes - I mean this jumping or lifting - exactly. Very annoying ;)

Try going here with an iPhone: http://swimrec.christianweyer.net/index.html

Thx!

[frequent]

ok. Let's see if I can find the source... :-)

[ChristianWeyer]

:) Any news here...? Thx!

[frequent]

not yet. Sitting over another plugin... you can give some feedback if you like.

[frequent]

Do you still have the problem? RC1.0 is out and on my Android it's much smoother now.

[ChristianWeyer]

yes, still the same problems...

[frequent]

hm. this is just two ideas, which I have not tried:

a) Have you tried CSS-setting your content height to at least fill the screen down to the navbar using CSS min-height?

This is because on any pageChange event, JQM does a scrolltop before changing the page. I'm not sure, but I think the scrolltop tries to pull up the footer to the end of your content (which may be way up the screen) and immediately overrides this because of the fixed positioning dropping the footer back down. If your content reaches at least down to the footer bar, the scrolltop and push down may be less noticeable.

I'm doing this with jquery to make sure any CSS gets overwritten:

You can get started using this function:

function newResetActivePageHeight () {
var $pageContent=$( "div:jqmData(role='page') div:JqmData(role='content')" ), $height = $.mobile.getScreenHeight(), // this function is inside JQM, not sure if called like this $html = $('html');

$pageContent.each(function() {  
    $(this).css("min-height", $height);
    }
});          

or instead of getScreenHeight(), which gets the overall page height, you could try something like this:

function ($thisPage) { // get exact content height $header=$thisPage.children(':jqmData(role="header")'), $content=$thisPage.children(':jqmData(role="content")'), $footer=$thisPage.children(':jqmData(role="footer")'),

thisHeaderHeight=$header.css('display') == 'none' ? 0 : $header.outerHeight(),
thisFooterHeight=$footer.css('display') == 'none' ? 0 : $footer.outerHeight(), 
// IE can only do this... 
thisWindowHeight=window.innerHeight,
// therefore need to add padding...
thisContentPadding=parseInt($content.css('padding-top'))+parseInt($content.css('padding-bottom')),
// set content height exactly to page-header-footer
thisHeight = thisWindowHeight-thisHeaderHeight-thisFooterHeight-thisContentPadding;

return thisHeight;
}

b) while transitioning JQM literally pulls up the new page on the right hand side, before sliding it in. When pulling up (or shortly before), the horizontal scrolling changes to current-page & new-page width for a short moment (I can see x-scrollbars blinking on desktop browsers). So a possible solution would be trying to override this either by CSS-!important width or overflow-x on the current page to make sure it does not expand during transitions.

I'm using a) myself in some other scenarios and have not noticed any real bad transitioning issues (did not pay attention to it though). Idea b) is just an idea...

Hope this helps a little.

[frequent]

I also checked your site on my HTC-Android.

In portrait mode, transitions look smooth, in landscape you have the same thing using the JQM standard toolbar. I have pretty much the same result using my toolbar in one of my other projects. Sometimes it's smooth, sometimes not. I think the reason is really page dimensions increasing during transition with the new page being created being moved up to scrollTop(0) and then transitioning in.

If you want to check this yourself, just add an alert("hello"); before this line in JQM $.mobile.changePage( href, { transition: transition, reverse: reverse, role: role } );

This will stop right when the page is pulled up to the right side of the screen. See the toolbars on desktop.

[ChristianWeyer]

Wow - this is a lot of stuff to digest ;) In essence, jQM just sucks in this area currently...

[frequent]

You also have a way with words...

I may have another easy solution:

Try setting position: relative; overflow-x:hidden; on all pages and see what happens.

As long as you don't set any top/left/right/bottom values, "relative" should keep an item in the exact same space as it would be with "static" (hoping...)

I don't know if this works cross-device and what low end browsers do, but on my desktop chrome and safari it seems to work.

iPad and Android, too :-)

[ChristianWeyer]

OK, thanks for the new idea. I added it. No issues so far on Android emu, Android device, iOS simu ... but on my iPhone 4. Still jumps around, argh.

[frequent]

step by step. Bugging me too :-)

[ChristianWeyer]

:)

[ChristianWeyer]

BTW, just FYI: https://github.com/jquery/jquery-mobile/issues/2646

[frequent]

Been a while, but I had jumpy navbars in my other plugin, too.

I fixed it by hacking into JQM like this.

Hack 1:

• in JQM look for this line: //function for transitioning between two existing pages
• block this scrollTop: window.scrollTo( 0, $.mobile.defaultHomeScroll );
• block this scrollTop: _if( !touchOverflow ){ $.mobile.silentScroll( toScroll ) }

Comment out the lines first to see if it works. If it does I would not block them altogether but put them in a wrapper to check for some condition. This made it almost work.

Hack 2 (more likely the cause): I think the faulty behavior is in the fixed toolbar function, hide(), show() and setop() functions.

soso explanation

• think of a page with 2000px length and screenHeight: 500px.
• plain footer will sit at the end of these 2000px.
• fixed footer is shown by JQM by more or less setting it's position el.css("top", to ~ -(2000px-500px) = -1500px (pull-up))
• fixed footer is hidden by setting it's position to el.css("top", 0); = end of the document (push-down)
• if your page height is smaller than the screenHeight, say 250px, the computed show() position will be positive -(250px-500px) = 250px. But the repositioning function for the footer only takes negative values, so it will not be positioned correctly initially and get el.css("top",0) = jump-up
• the event fires at least two times and on the second run the wrong value is overwritten resulting in correct position.

There's the cause I believe. I fixed it in my plugin 99%. It still jumps up once on pageinit, but this is for an unrelated reason. Posting this to the issue so it hopefully will be solved.

Cheers

[ChristianWeyer]

Can you send over your fixed jqm file?

[frequent]

nope, my file is a mess...

but in JQM rc3 line #6654 if ( thisCSStop < 0 || ( el.is( ".ui-header-fixed" ) && thisCSStop !== 0 ) ) {
replace with this: if ( thisCSStop < 0 || ( el.is( ".ui-header-fixed" ) || ( el.is( ".ui-footer-fixed" ) && immediately != true ) ) && thisCSStop !== 0 ) ) {

and

line #6665 el.removeClass( classes ).css( "top", 0 );
replace with this: el.removeClass( classes ).css( "top", ( el.is(".ui-footer-fixed") && thisCSStop > 0 ) ? -thisCSStop : 0 );

Can you tell me it works? I haven't had time to setup a simple example to check. Thx!

[ChristianWeyer]

Hope to try it before xmas...

[frequent]

works. see here: https://github.com/frequent/jquery-mobile/commit/4f63b063e8cb04aef604cab5a53e21dcc8685952#commitcomment-756474

So I guess we can close this (JQM) issue?