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?

[johnbender]

@mmavko

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

[daniel-sabourin]

@johnbender

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

[staabm]

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

[toddparker]

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

[staabm]

Sorry , but i have no android device

[toddparker]

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:
b668b60

[staabm]

Perfect, thanks to you guys!

[robschmuecker]

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.

overflow:auto;
overflow:hidden;
overflow:overlay;
overflow:scroll;

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

R.

[jaspermdegroot]

@robschmuecker

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