Response title
This is preview!
Move this topic
iPhone Safari address bar jumps down after page transition
in jQuery Mobile
•
10 years ago
On the iphone, the Safari browser scrolls up and hides the address bar when when you first land on a jquery mobile page. This same behavior happens if you post a form to a new page. So far so good.
However, if you navigate to a new page with an anchor, the framework adds the hash tag to the url which seems to freak out Safari. The address bar starts to hide, then it jumps back down from it's hidden state.
Are there any best practices for designing the site and/or page transitions to keep the smooth looking behavior?
However, if you navigate to a new page with an anchor, the framework adds the hash tag to the url which seems to freak out Safari. The address bar starts to hide, then it jumps back down from it's hidden state.
Are there any best practices for designing the site and/or page transitions to keep the smooth looking behavior?
10
Replies(23)
I'm having this same issue and it's driving me nuts. The first #page and second #page both include lists. Could this cause it? It works as I would expect, then everytime that damn address bar pops back down.
Any ideas, anyone. Bueller.
Leave a comment on chris.rubal's reply
Im having the same problem the animation becomes retarted when the navbar hides.
I was looking for a way to disable the
- <body onload="setTimeout(scrollTo, 0, 0, 1)">
because this the thing causes the nav bar to hide, it will only hide when the page is long if the page is not it wont. So im thinking if jquery mobile has this option to turned off coz its scroll down to hide the navbar by default. anybody know where this option is?
Wow..it only hides if the page is long! That is it! But, fairly annoying if that truly is the case. Is there a way to adjust it so the address bar hides regardless of the length of the page? Hiding the address bar in a browser makes it feel more app-like.
Wow..it only hides if the page is long! That is it! But, fairly annoying if that truly is the case. Is there a way to adjust it so the address bar hides regardless of the length of the page? Hiding the address bar in a browser makes it feel more app-like.
Leave a comment on arsyan's reply
You cant really hide the toolbar if the page is not long, this is because it doesnt actually hide the bar, it actually scrolls down the page for you. Its a trick that makes u see that the nav bar is actually dissapearing, jquery mobile do take long to respond to this question.
How?
i use <meta name="viewport" content="height=device-height,width=device-width" >
Leave a comment on arsyan's reply
Having the same problem here (using alpha 2)
This is probably due to the way page transitions are done. When a page transition happens, between hiding the first page and showing the second page there is a small time window when the page height is smaller than the device height. The address bar will jump down then.
In addition to this, in an Android phone, the address bar is always present. It's never hidden. It's possible to patch jquery mobile to fix that issue, but this is not optimal I suppose. I didnt have time to check if this has already been reported as a bug...
This is probably due to the way page transitions are done. When a page transition happens, between hiding the first page and showing the second page there is a small time window when the page height is smaller than the device height. The address bar will jump down then.
In addition to this, in an Android phone, the address bar is always present. It's never hidden. It's possible to patch jquery mobile to fix that issue, but this is not optimal I suppose. I didnt have time to check if this has already been reported as a bug...
Doing some more testing I realized the problem lies on updating "location.hash". This makes the browser address bar pop down. I don't know if this is fixable... at least not without breaking the current history/back buttons implementation. Does anyone agree?
Leave a comment on itopcin's reply
I don't think that the location change is what causes it. Anytime that changePage() is called, the hash gets added to the URL. I also don't think it has to do with list-views in particular. As someone mentioned, if the page is too short then scrollTo() doesn't work since you can't show part of a page that doesn't exist. Ideally, the page would have a min-height set of whatever the device's height is. I'm actually trying to figure out how to determine the device's height, hence my lurking through these forums. I may post soon if I don't find anything.
Ok, I've done more investigation on this issue... And the reason the address bar pops down is that location.hash is being changed. Turns out that when location.hash changes, the browser scrolls to the position of the current page div (which happens to have id = location.hash). As the page div is positioned at coordinates [0, 0], the browser window will be scrolled to that position, which happens to be the very top of the page. And the navigation bar pops.
I've modified the code around updateHash() internal function to reposition the DIV to [top = 1, left = 0] BEFORE the location.hash is updated. And now the address bar is not popping down anymore.
However, I could not prevent this from happening when the "Back" button is clicked. Any ideas?
Note: if page height is <= screen height, the address bar will jump down. The minimum condition to hide the address bar is if page height = screen height + 1px.
I've modified the code around updateHash() internal function to reposition the DIV to [top = 1, left = 0] BEFORE the location.hash is updated. And now the address bar is not popping down anymore.
However, I could not prevent this from happening when the "Back" button is clicked. Any ideas?
Note: if page height is <= screen height, the address bar will jump down. The minimum condition to hide the address bar is if page height = screen height + 1px.
Leave a comment on brandonaaskov's reply
If we create a single site page, then use jquery templates
to replace the page content, the page will not jump.
We still get all the nice mobile layout and styling,
however, the swipe and back button wont work automatically.
I'm not crazy about the swipe or back button anyway.
They dont always work right if the site navigation loops on itself.
thoughts?
Leave a comment on systemsplanet's reply
I think I've come up with a solution for iOS... add this meta:
- <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,height=device-height,width=device-width,user-scalable = no">
That seems to fix it in a4pre, maintain the page-height 100%, and not mess up page-transitions!. Awesome!!!! I think the developers need to get this in a4 before it ships. The current a4pre has this problem big time.
Hmmm... it doesn't look like that's the answer. Now I have a problem when the orientation changes. Are you seeing that too?
Basecamp's mobile app seems to work properly even with a hashchange... I'll look to see how they're doing it.
Leave a comment on rmanalan's reply
You're right... Darn, it was looking so promising...
Leave a comment on epsd.jquery's reply
Have a look in this thread for a workaround
That doesn't fix the address bar jumping down on page transitions in the newly released A4 though...
Leave a comment on cameronbraid's reply
sorry, you are right, I had missed one change
you need to change the meta tag
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
and add in :
height=device-height
e.g.
<meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1, maximum-scale=1">
Setting height=device-height causes the browser to not rescale the page on orientation change. At least that's what's happening for me... does that happen in your app as well?
Basecamp's mobile app has fixed this somehow and their viewport meta looks pretty much the same without the height:
user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0
So, I'm not sure what's causing this problem in jQM. I've spent most of today trying to debug this problem without much luck.
Leave a comment on cameronbraid's reply
A few people, myself included, think we may have the answer. Check it out here:
http://forum.jquery.com/topic/stopping-the-url-bar-from-dropping-down-i-discovered-a-workaround
http://forum.jquery.com/topic/stopping-the-url-bar-from-dropping-down-i-discovered-a-workaround
Leave a comment on dimitryz's reply
May be try this..
http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html#/demos/1.0/docs/pages/touchoverflow.html
<script>
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true;
});
</script>
http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html#/demos/1.0/docs/pages/touchoverflow.html
Leave a comment on john.manoah's reply
Try adjusting this to a number greater than the viewport. I changed mine to 830px and it no longer shows the address bar between transitions.
@media screen and (orientation: portrait){.ui-mobile, .ui-mobile .ui-page {min-height: 420px;}}
Leave a comment on tshelburn's reply
Leave a comment on zSprawl's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to lavamantis's question
{"z4733265":[14737000001518583],"z5930904":[14737000002191239],"z8497418":[14737000003033373],"z4998169":[14737000001687435,14737000001696245,14737000001715013],"z8744100":[14737000003123193],"z2976196":[14737000002149499,14737000002149561,14737000002147731],"z906568":[14737000001547964,14737000001550246,14737000001550244],"z271889":[14737000002149497,14737000002149505,14737000002149862],"z8768044":[14737000003110407],"z4959792":[14737000001672375],"z5822244":[14737000002147729,14737000002146724],"z1241733":[14737000001552062,14737000001556913],"z5041714":[14737000001708767],"z4980004":[14737000001714104]}