Closed ChristianWeyer closed 12 years ago
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?
Yes - I mean this jumping or lifting - exactly. Very annoying ;)
Try going here with an iPhone: http://swimrec.christianweyer.net/index.html
Thx!
ok. Let's see if I can find the source... :-)
:) Any news here...? Thx!
not yet. Sitting over another plugin... you can give some feedback if you like.
Do you still have the problem? RC1.0 is out and on my Android it's much smoother now.
yes, still the same problems...
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.
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.
Wow - this is a lot of stuff to digest ;) In essence, jQM just sucks in this area currently...
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 :-)
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.
step by step. Bugging me too :-)
:)
BTW, just FYI: https://github.com/jquery/jquery-mobile/issues/2646
Been a while, but I had jumpy navbars in my other plugin, too.
I fixed it by hacking into JQM like this.
Hack 1:
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
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
Can you send over your fixed jqm file?
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!
Hope to try it before xmas...
works. see here: https://github.com/frequent/jquery-mobile/commit/4f63b063e8cb04aef604cab5a53e21dcc8685952#commitcomment-756474
So I guess we can close this (JQM) issue?
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.