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

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

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

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

@cremark

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

@toddparker

We have a Motorola XOOM and Samsung Galaxy Tab 10.1.

@toddparker

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

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

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

@toddparker

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

@cremark

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

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

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

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

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

@cremark

@kirk911 I can not confirm this.

@kirk911

@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

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

Isn't this a dupe of #4663 ?

@jaspermdegroot
jQuery Foundation 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.

@istrasoft

@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
jQuery Foundation 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.

@istrasoft

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

@jaspermdegroot
jQuery Foundation 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!

@efrencd

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

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
jQuery Foundation 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.

@PixelRelish

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