Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Persistent navbar broken on scroll, Chrome for android #4663

Reyncor opened this Issue · 20 comments

9 participants

Ray Foss Adam Messinger John Bender Daniel Sabourin Myron Mavko Markus Staab Todd Parker Rob Schmuecker Jasper de Groot
Ray Foss

To reproduce on Chrome for android (not beta):
1. visit this page
2. scroll down about 2 item heights.
3. Tap any button on the footer...
non of them work.

It works perfectly on the android browser. With the imminent release of the Nexus 7, this is an issue that I cannot over look.

Ray Foss

So after some debugging, it seems that touch events start bubbling from the data-role=navbar element when scrolled down, normally it should be span->span->a->li->ul->div.

Adam Messinger

Is this a duplicate of #3973?

John Bender johnbender was assigned
Ray Foss

My issue is that the buttons don't work at all when you are scrolled down. This issue is more urgent, but the solution may be common to both.

I can replicate #3973 with but not with meanwhile, my issue stands on both versions.

Ray Foss

If it helps, the best workaround I've found is to remove the data-role=navbar attribute. It removes the nice styling, but at least it works.

John Bender

Works on 4.1 (default browser == chrome). We'll need a 4.0.1 device to test with.

Ray Foss

Hum, forgot to scroll or tried the info button only?... try this

Daniel Sabourin


I can confirm that this does NOT work in 4.1. I'm running a Galaxy Nexus running 4.1.1 and Reyncor's test case did not work while in Chrome. My Galaxy Nexus has both the stock browser and Chrome. It works in the stock browser and does not work in Chrome.

John Bender

@Reyncor @daniel-sabourin

I can reproduce with latest chrome on 4.1. I'll take a look.

John Bender johnbender closed this in dea9d31
John Bender

First attempt at a fix here in both master and 1.1-stable:

You can test it with as your include. Please re-open if this doesn't address the issue.


Myron Mavko

I have found that this css workarounds the issue:

.ui-navbar ul {
  overflow: visible !important;

Maybe this will give you a clue to identify the problem on the deeper level.

John Bender


That would be much much nicer to use than the js hack I have in place.

@Reyncor @daniel-sabourin

Can you confirm that the above works for you as well?

John Bender


I can confirm that this addresses the issue. I'll probably let @uGoMobi take over from here.

Daniel Sabourin


I can also confirm that this fixes the issue. Thanks @mmavko @johnbender @Reyncor

Markus Staab

Do we have to revert the initial changes made by @johnbender ?

Todd Parker

@staabm - if the CSS fix alone works, then yes. We're testing now but if you can test this and report back, we'd appreciate it.

Markus Staab

Sorry , but i have no android device

Todd Parker

I just tested master with @johnbender's commit reverted and the persistent toolbar items are clickable if the page is scrolled. Confirmed on 4.0.4 Default browser and Chrome and 4.1 Default (Chrome).

@johnbender - This JS code can be reverted:

Markus Staab

Perfect, thanks to you guys!

Rob Schmuecker

Hi All,

This fix seems to have broken the layout of a navbar and a list combined on android 2.3.x when list text is too long to display. issue #4958

For some reason it is interferring with the overflow property of the list on the same page.
I can confirm that the following settings for .navbar ul' alleviate the issue of issue #4958 so perhaps substituting one of these will also fix this issue without breaking backward compatibility or we may need to revert back to @johnbender's original javascript solution. Unfortunately I haven't been able to test on a 4.0.1 device or similar.


I have also seen @uGoMobi's clearfix suggestion of #5008 which fixes #4958 so perhaps we just need to implement that instead.


Jasper de Groot


Thanks for your post!
I actually just commited the "clearfix" solution which fixed #5008 and #4958 so this seems to be all solved now.

Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
John Bender johnbender capture and retrigger clicks on the parent list item element in navba…
…rs Fixes #4663
Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
Jasper de Groot jaspermdegroot Navbar: Fixes #4663 - Persistent navbar broken on scroll, Chrome for …
…android. Thanks @mmavko :+1:
Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
John Bender johnbender Revert "capture and retrigger clicks on the parent list item element …
…in navbars Fixes #4663"

This reverts commit b668b60.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.