Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Persistent navbar broken on scroll, Chrome for android #4663

Closed
Reyncor opened this Issue · 20 comments
@Reyncor

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.

@Reyncor

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?

@johnbender johnbender was assigned
@Reyncor

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.

@Reyncor

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.

@Reyncor

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 johnbender closed this in dea9d31
@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
Collaborator

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

@arschmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
@johnbender johnbender capture and retrigger clicks on the parent list item element in navba…
…rs Fixes #4663
184c6c3
@arschmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
@jaspermdegroot jaspermdegroot Navbar: Fixes #4663 - Persistent navbar broken on scroll, Chrome for …
…android. Thanks @mmavko :+1:
a576fea
@arschmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
@johnbender johnbender 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.