Fixed toolbars change position when navigating between tabs.

[balshamali]

Ive been using the fixed toolbar lately and its great, in most scenarios. However, there is a bug that Ive spent two days trying to figure out and finally found a workaround for the issue.

The testing was done on ios v5 iphone emulator and does not happen by testing in chrome. The fixed toolbar is not quite fixed when navigating between pages using a navbar in the footer. The fixed toolbar changes position if you are on one page, click on the top of the screen to auto-scroll to the top of safari (note this will show the address bar), navigate to another page that is not full (as in the content of the page does not occupy the page height). The footer will rise from the bottom in an amount equal to the height of the address bar. It can be set back to the fixed bottom position by scrolling. I tried to trigger a scroll event every time I switch pages but that doesn't seem to fix the issue.

The workaround i have now is that I have modified the line:

$el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), $el.outerHeight() );

in updatePagePadding function in fixedtoolbar implementation to always add enough padding to the bottom to fill the screen enough to push the footer to the bottom of the page. Any feedback would be great. Thanks

[jaspermdegroot]

@balshamali

Can you test your project using this code:

CSS: http://ugomobi.github.com/fixedtoolbars/css_new06132012.css
JS: http://ugomobi.github.com/fixedtoolbars/js_new06132012.js

This includes the changes of PR #4260 from @MauriceG

Please confirm if this solves the issues you were having with updatePagePadding. Thanks!

[balshamali]

Sure I will let you know shortly.

On Thu, Jun 14, 2012 at 6:45 PM, Jasper de Groot <
reply@reply.github.com

wrote:

@balshamali

Can you test your project using this code:

CSS: http://ugomobi.github.com/fixedtoolbars/css_new06132012.css
JS: http://ugomobi.github.com/fixedtoolbars/js_new06132012.js

This includes the changes of PR #4260 from @MauriceG

Please confirm if this solves the issues you were having with
updatePagePadding. Thanks!

---

Reply to this email directly or view it on GitHub:
#4259 (comment)

[balshamali]

Unfortunately this still happens with the new files you provided. Ive added
a screenshot of the issue.

On Thu, Jun 14, 2012 at 9:02 PM, Bassam Al Shamali biscim@gmail.com wrote:

Sure I will let you know shortly.

On Thu, Jun 14, 2012 at 6:45 PM, Jasper de Groot <
reply@reply.github.com

wrote:

@balshamali

Can you test your project using this code:

CSS: http://ugomobi.github.com/fixedtoolbars/css_new06132012.css
JS: http://ugomobi.github.com/fixedtoolbars/js_new06132012.js

This includes the changes of PR #4260 from @MauriceG

Please confirm if this solves the issues you were having with
updatePagePadding. Thanks!

---

Reply to this email directly or view it on GitHub:
#4259 (comment)

[jaspermdegroot]

@balshamali

We need a simple JSBin test page that reproduces the issue for you (on the emulator) and then we test on real device to see if it also happens there.
You can find our JSBin template here https://github.com/jquery/jquery-mobile#issues

[balshamali]

Can the content within the JSBin page change. For example, can I add a
listview because it seems to happen when i have that container. Also there
are other issues such as the footer partially hiding when clicking on the
page (it should completely hide).

On Fri, Jun 15, 2012 at 4:52 AM, Jasper de Groot <
reply@reply.github.com

wrote:

@balshamali

We need a simple JSBin test page that reproduces the issue for you (on the
emulator) and then we test on real device to see if it also happens there.
You can find our JSBin template here
https://github.com/jquery/jquery-mobile#issues

---

Reply to this email directly or view it on GitHub:
#4259 (comment)

[MauriceG]

Hi @balshamali
I've a fiddle here with listview and iOS test inputs: http://jsfiddle.net/MauriceG/Tm3Bx/
fullscreen: http://jsfiddle.net/MauriceG/Tm3Bx/show/

[balshamali]

Steps to replicate:

1. Have two pages that are not full (since if they are completely full then
   you will always push the footer to the bottom of the page).
2. Start at the first page, click on the top toolbar to scroll to the top
   of the page (with an ios simulator).
3. Click on the second navbar to go to the second page.
4. Click on the top toolbar to scroll to the top of the second page.
5. Click on the first navbar to go to the first page (the fixed toolbar
   will rise by the amount of the addressbar).

I will upload an example sometime soon to show this behavior using the
JSBin template you have.

On Fri, Jun 15, 2012 at 10:21 AM, Maurice Gottlieb <
reply@reply.github.com

wrote:

Hi @balshamali
I've a fiddle here with listview and iOS test inputs:
http://jsfiddle.net/MauriceG/Tm3Bx/

---

Reply to this email directly or view it on GitHub:
#4259 (comment)

[jaspermdegroot]

@balshamali

You can change anything you want in the JSBin template so it meets your actual use case and reproduces the issue. Same goes for the JSFiddle from @MauriceG. You can clone/fork it and save new version. Just don't change the source of the css and js so it keeps loading latest code.

BTW - Based on "the fixed toolbar will rise by the amount of the addressbar" I don't think it is related to the "updatePagePadding" function

[balshamali]

The problem I am talking about it summarized by:
#4259

and I assumed it was being fixed by the fix provided in:
#4260

Am I confused?

On Sat, Jun 16, 2012 at 4:40 AM, Jasper de Groot <
reply@reply.github.com

wrote:

@balshamali

You can change anything you want in the JSBin template so it meets your
actual use case and reproduces the issue. Same goes for the JSFiddle from
@MauriceG. You can clone/fork it and save new version. Just don't change
the source of the css and js so it keeps loading latest code.

BTW - Based on "the fixed toolbar will rise by the amount of the
addressbar" I don't think it is related to the "updatePagePadding" function

---

Reply to this email directly or view it on GitHub:
#4259 (comment)

[jaspermdegroot]

@balshamali

I understand the issue is described by #4259 because the emails you receive and send about this are in fact comments added to the thread there :-)

We hoped your issue would be fixed by PR 4260, but - as you noticed - that is not the case. That PR fixed issues with the "updatePagePadding" function and after I looked into your issue again I concluded it is not related to that function.

Position fixed means fixed to the viewport. The address bar is part of the window, but not the viewport. See also section 4 here http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/_index.html
That is why "the fixed toolbar will rise by the amount of the addressbar" sounds like the position of the fixed header is not updated when the viewport changes.

Looking forward to your test page so we are sure that we are looking at the exact same use case!

[balshamali]

I understand they get posted there but I was just clarifying what we were
talking about because it seems that the issues were getting confused.
Please take a look at the test page:

http://dropcanvas.com/todr0

On Sat, Jun 16, 2012 at 9:00 AM, Jasper de Groot <
reply@reply.github.com

wrote:

@balshamali

I understand the issue is described by
#4259 because the emails
you receive and send about this are in fact comments added to the thread
there :-)

We hoped your issue would be fixed by PR 4260, but - as you noticed - that
is not the case. That PR fixed issues with the "updatePagePadding" function
and after I looked into your issue again I concluded it is not related to
that function.

Position fixed means fixed to the viewport. The address bar is part of the
window, but not the viewport. See also section 4 here
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/_index.html
That is why "the fixed toolbar will rise by the amount of the addressbar"
sounds like the position of the fixed header is not updated when the
viewport changes.

Looking forward to your test page so we are sure that we are looking at
the exact same use case!

---

Reply to this email directly or view it on GitHub:
#4259 (comment)

[balshamali]

Reproduction steps:

1. Start at the first page with the iOS simulator, click on the top toolbar to scroll to the top
   of the page.
2. Click on the second navbar to go to the second page.
3. Click on the top toolbar to scroll to the top of the second page.
4. Click on the first navbar to go to the first page (the fixed toolbar
   will rise by the amount of the address bar).