New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

links in fixed toolbar/navbar not clickable when not on top of page #4032

Closed
cremark opened this Issue Apr 13, 2012 · 24 comments

Comments

@cremark

cremark commented Apr 13, 2012

When I am not on the page's top (!) links (buttons) in both the fixed toolbar and fixed navbar are not clickable on my device (android 3.1)! I simply just click right through them.

Demo: http://jsfiddle.net/uYQAg/

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 13, 2012

Contributor

I wasn't able to reproduce this on our Honeycomb tablet, but there are odd differences between Android across devices.

Contributor

toddparker commented Apr 13, 2012

I wasn't able to reproduce this on our Honeycomb tablet, but there are odd differences between Android across devices.

@cremark

This comment has been minimized.

Show comment
Hide comment
@cremark

cremark Apr 13, 2012

What tablet do you have? I have a Samsung Galaxy Tab GT-PT7500.

cremark commented Apr 13, 2012

What tablet do you have? I have a Samsung Galaxy Tab GT-PT7500.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 19, 2012

Contributor

We have a Motorola XOOM and Samsung Galaxy Tab 10.1.

Contributor

toddparker commented Apr 19, 2012

We have a Motorola XOOM and Samsung Galaxy Tab 10.1.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 28, 2012

Contributor

I think this is a duplicate of #4069 - can you confirm and close if so? Feel free to comment on that issue with your info. Thanks!

Contributor

toddparker commented Apr 28, 2012

I think this is a duplicate of #4069 - can you confirm and close if so? Feel free to comment on that issue with your info. Thanks!

@cremark

This comment has been minimized.

Show comment
Hide comment
@cremark

cremark Apr 28, 2012

The issues are somehow similar, but still different.

I can't get the links in the footer to work and it is not only the first link.

Furthermore I have to click the navbar links twice to actually change the page, when I remove data-position="fixed" in the footer.

I think about doing a hard reset on the tablet, these are weird issues.

cremark commented Apr 28, 2012

The issues are somehow similar, but still different.

I can't get the links in the footer to work and it is not only the first link.

Furthermore I have to click the navbar links twice to actually change the page, when I remove data-position="fixed" in the footer.

I think about doing a hard reset on the tablet, these are weird issues.

@cremark

This comment has been minimized.

Show comment
Hide comment
@cremark

cremark Apr 29, 2012

It actually seems like the links in the fixed navbar are positioned absolute! The links don't scroll with the navbar.

cremark commented Apr 29, 2012

It actually seems like the links in the fixed navbar are positioned absolute! The links don't scroll with the navbar.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 30, 2012

Contributor

Thanks, we'll try to reproduce this on a different device.

Contributor

toddparker commented Apr 30, 2012

Thanks, we'll try to reproduce this on a different device.

@cremark

This comment has been minimized.

Show comment
Hide comment
@cremark

cremark May 4, 2012

The problem still exists when I don't even use a navbar in the footer:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
  <ul> 
    <li><a href='#pageA'>AAAAAAAAAAAAAAAAAAAAAAAAAA</a></li> 
    <li><a href='#pageB'>BBBBBBBBBBBBBBBBBBBBBBBBBB</a></li> 
  </ul> 
</div>

Can somebody reproduce this?

cremark commented May 4, 2012

The problem still exists when I don't even use a navbar in the footer:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
  <ul> 
    <li><a href='#pageA'>AAAAAAAAAAAAAAAAAAAAAAAAAA</a></li> 
    <li><a href='#pageB'>BBBBBBBBBBBBBBBBBBBBBBBBBB</a></li> 
  </ul> 
</div>

Can somebody reproduce this?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 4, 2012

Contributor

I just re-tested on a few Android devices and from what I can see it it's inconsistent. I can definitely get to situations where a link in the footer (no so much in the headers) won't kick off the Ajax page switch bu tit's not consistently reproducible. Has anyone come up with a test page and precise set of steps to make this happen consistently on a specific version of Android?

Contributor

toddparker commented May 4, 2012

I just re-tested on a few Android devices and from what I can see it it's inconsistent. I can definitely get to situations where a link in the footer (no so much in the headers) won't kick off the Ajax page switch bu tit's not consistently reproducible. Has anyone come up with a test page and precise set of steps to make this happen consistently on a specific version of Android?

@RodH257

This comment has been minimized.

Show comment
Hide comment
@RodH257

RodH257 May 17, 2012

I've noticed this bug (I think it's the same one you are talking about?) on Google Chrome Beta for Android ICS. If you go to this page:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-a.html

on the chrome browser (ie not the build in android one, but the new one from Google) and scroll down on the friends page you can't click the navbar links.

RodH257 commented May 17, 2012

I've noticed this bug (I think it's the same one you are talking about?) on Google Chrome Beta for Android ICS. If you go to this page:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-a.html

on the chrome browser (ie not the build in android one, but the new one from Google) and scroll down on the friends page you can't click the navbar links.

@kirk911

This comment has been minimized.

Show comment
Hide comment
@kirk911

kirk911 May 18, 2012

Not sure if it helps much, but disabling zoom prevents the click through.

<meta name="viewport" content="user-scalable=no">

kirk911 commented May 18, 2012

Not sure if it helps much, but disabling zoom prevents the click through.

<meta name="viewport" content="user-scalable=no">

@cremark

This comment has been minimized.

Show comment
Hide comment
@cremark

cremark May 19, 2012

@kirk911 I can not confirm this.

cremark commented May 19, 2012

@kirk911 I can not confirm this.

@kirk911

This comment has been minimized.

Show comment
Hide comment
@kirk911

kirk911 May 22, 2012

@cremark I apologize, we were using version 1.0, and used our own headers with css position:fixed. Disabling zoom did solve the click through problem in our case however.

kirk911 commented May 22, 2012

@cremark I apologize, we were using version 1.0, and used our own headers with css position:fixed. Disabling zoom did solve the click through problem in our case however.

@LuigiClaudio

This comment has been minimized.

Show comment
Hide comment
@LuigiClaudio

LuigiClaudio Jul 13, 2012

JSBin of navbar links not responding to touch events prior slide, tested on Galaxy Nexus ICS 4.0.4 http://jsbin.com/ijinoj/14

LuigiClaudio commented Jul 13, 2012

JSBin of navbar links not responding to touch events prior slide, tested on Galaxy Nexus ICS 4.0.4 http://jsbin.com/ijinoj/14

@istrasoft

This comment has been minimized.

Show comment
Hide comment
@istrasoft

istrasoft Jul 25, 2012

Isn't this a dupe of #4663 ?

istrasoft commented Jul 25, 2012

Isn't this a dupe of #4663 ?

@ghost ghost assigned jaspermdegroot Sep 3, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 3, 2012

Member

@cremark

This seems to be a duplicate of #4663 (thanks @istrasoft ) and #3973. Those issues are both recently fixed. Can you test again on your Honeycomb device? Thanks!

@RodH257 - The issue you mentioned has been fixed. See http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html on ICS/Chrome.

@LuigiClaudio - Tested your JSBin on same device and the problem is gone.

Member

jaspermdegroot commented Sep 3, 2012

@cremark

This seems to be a duplicate of #4663 (thanks @istrasoft ) and #3973. Those issues are both recently fixed. Can you test again on your Honeycomb device? Thanks!

@RodH257 - The issue you mentioned has been fixed. See http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html on ICS/Chrome.

@LuigiClaudio - Tested your JSBin on same device and the problem is gone.

@istrasoft

This comment has been minimized.

Show comment
Hide comment
@istrasoft

istrasoft Sep 3, 2012

@uGoMobi recently fixed you mean in the repo or in the alpha ? do you have any (even approximate) idea on the beta / RC / release plase ? thanks

istrasoft commented Sep 3, 2012

@uGoMobi recently fixed you mean in the repo or in the alpha ? do you have any (even approximate) idea on the beta / RC / release plase ? thanks

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 3, 2012

Member

@istrasoft

I mean fixed in latest code on branch master. @cremark his example is using latest code so you can grab the url's from his fiddle if you want to test.
We want to do a beta release this week.

Member

jaspermdegroot commented Sep 3, 2012

@istrasoft

I mean fixed in latest code on branch master. @cremark his example is using latest code so you can grab the url's from his fiddle if you want to test.
We want to do a beta release this week.

@istrasoft

This comment has been minimized.

Show comment
Hide comment
@istrasoft

istrasoft Sep 3, 2012

Thanks a lot ! We also have a release soon, hence the question :)

istrasoft commented Sep 3, 2012

Thanks a lot ! We also have a release soon, hence the question :)

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 4, 2012

Member

@cremark - I am pretty sure we solved this so I am closing this ticket. Let us know when you were able to test. If the problem still occurs we can reopen. Thanks!

Member

jaspermdegroot commented Sep 4, 2012

@cremark - I am pretty sure we solved this so I am closing this ticket. Let us know when you were able to test. If the problem still occurs we can reopen. Thanks!

@efrencd

This comment has been minimized.

Show comment
Hide comment
@efrencd

efrencd Nov 25, 2012

I'm having this issue.

I got a fixed toolbar with buttons floating on top of a long list view. When I'm at the top of the list I can click the buttons on the footer. If I'm not on top the footer buttons do not work.

It works on default Android browser but fails in Chrome for Android.

Using Androd 4.1 on a Samsung Galaxy S2

efrencd commented Nov 25, 2012

I'm having this issue.

I got a fixed toolbar with buttons floating on top of a long list view. When I'm at the top of the list I can click the buttons on the footer. If I'm not on top the footer buttons do not work.

It works on default Android browser but fails in Chrome for Android.

Using Androd 4.1 on a Samsung Galaxy S2

@alvarovargas

This comment has been minimized.

Show comment
Hide comment
@alvarovargas

alvarovargas Nov 26, 2012

I am having the exact same issue as @efrencd. Footer buttons in Chrome for Android only work when scrolled to the top of the page.

Using Android 4.1.2 on Samsung Galaxy S3

alvarovargas commented Nov 26, 2012

I am having the exact same issue as @efrencd. Footer buttons in Chrome for Android only work when scrolled to the top of the page.

Using Android 4.1.2 on Samsung Galaxy S3

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Nov 26, 2012

Member

@efrencd @alvarovargas This should be fixed in latest if it is not can you please provide a test page demonstrating the issue and we can reopen.

Member

arschmitz commented Nov 26, 2012

@efrencd @alvarovargas This should be fixed in latest if it is not can you please provide a test page demonstrating the issue and we can reopen.

@PixelRelish

This comment has been minimized.

Show comment
Hide comment
@PixelRelish

PixelRelish Dec 16, 2013

I am still having the same problem (Dec 2013): I came up with what I thought was a solution, or at least a best-case-patch, which was to hide the main toggle menu on Android and instead show only a contact icon, which I linked to an anchor at the final section of the page (a footer with the company contact information), so, during the scroll, people would flash past the other content and, if desired, go back to read it. Only I just noticed the link only works when at the top of the page. Do I have to double-write code so I can make the nav inline (not fixed) on Android? Super simple one-page starter site built from Spot Bootstrap template. What am I missing? I thought I've downloaded and applied all the latest fixes. Problem shows up on my HTC Evo4G, which, according to whatismybrowser.com, is running Android Mobile v2.3. Here is the page in question (had to go live even with the issue): http://dcIQ.com I'm having the same problem on more complex site I'm currently developing; it's code is more of a mess as I try (and refine) different things; took a different nav approach with it, yet also having the Android issues, so could use the fix on either :-) That site is still on my workbench: http://pixel-relish.com/cbm/

PixelRelish commented Dec 16, 2013

I am still having the same problem (Dec 2013): I came up with what I thought was a solution, or at least a best-case-patch, which was to hide the main toggle menu on Android and instead show only a contact icon, which I linked to an anchor at the final section of the page (a footer with the company contact information), so, during the scroll, people would flash past the other content and, if desired, go back to read it. Only I just noticed the link only works when at the top of the page. Do I have to double-write code so I can make the nav inline (not fixed) on Android? Super simple one-page starter site built from Spot Bootstrap template. What am I missing? I thought I've downloaded and applied all the latest fixes. Problem shows up on my HTC Evo4G, which, according to whatismybrowser.com, is running Android Mobile v2.3. Here is the page in question (had to go live even with the issue): http://dcIQ.com I'm having the same problem on more complex site I'm currently developing; it's code is more of a mess as I try (and refine) different things; took a different nav approach with it, yet also having the Android issues, so could use the fix on either :-) That site is still on my workbench: http://pixel-relish.com/cbm/

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