Skip to content
This repository

Persistent navbar broken on scroll, Chrome for android #4663

Closed
Reyncor opened this Issue · 20 comments

9 participants

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

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.

Lucien 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?

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

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

Lucien Foss

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.

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 http://jquerymobile.com/branches/1.1-stable/js/ as your include. Please re-open if this doesn't address the issue.

Thanks!

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

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

John Bender

@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

Jasper de Groot uGoMobi reopened this
Jasper de Groot uGoMobi closed this in 7f312da
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:
b668b60

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.

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.

Jasper de Groot
Owner

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

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

This reverts commit b668b60.
8452935
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.