Persistent navbar broken on scroll, Chrome for android

[FossPrime]

To reproduce on Chrome for android (not beta):

1. visit this page http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-b.html
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.

[FossPrime]

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.

[adammessinger]

Is this a duplicate of #3973?

[FossPrime]

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 http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-b.html but not with http://jquerymobile.com/test/docs/toolbars/footer-persist-c.html meanwhile, my issue stands on both versions.

[FossPrime]

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.

[johnbender]

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

[FossPrime]

Hum, forgot to scroll or tried the info button only?... try this https://www.youtube.com/watch?v=P6Aj6bPeqvk&feature=youtube_gdata_player

[daniel-sabourin]

@johnbender

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.

[johnbender]

@Reyncor @daniel-sabourin

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

[johnbender]

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

You can test it with http://jquerymobile.com/branches/1.1-stable/js/ as your include. Please re-open if this doesn't address the issue.

Thanks!

[mmavko]

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.

[johnbender]

@mmavko

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?