New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Persistent navbar broken on scroll, Chrome for android #4663

Closed
rayfoss opened this Issue Jul 10, 2012 · 20 comments

Comments

Projects
None yet
9 participants
@rayfoss

rayfoss commented Jul 10, 2012

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.

@rayfoss

This comment has been minimized.

Show comment
Hide comment
@rayfoss

rayfoss Jul 10, 2012

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.

rayfoss commented Jul 10, 2012

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

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Jul 10, 2012

Is this a duplicate of #3973?

adammessinger commented Jul 10, 2012

Is this a duplicate of #3973?

@rayfoss

This comment has been minimized.

Show comment
Hide comment
@rayfoss

rayfoss Jul 10, 2012

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.

rayfoss commented Jul 10, 2012

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.

@rayfoss

This comment has been minimized.

Show comment
Hide comment
@rayfoss

rayfoss Jul 18, 2012

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.

rayfoss commented Jul 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Jul 30, 2012

Contributor

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

Contributor

johnbender commented Jul 30, 2012

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

@rayfoss

This comment has been minimized.

Show comment
Hide comment
@rayfoss

rayfoss Jul 30, 2012

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

rayfoss commented Jul 30, 2012

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

This comment has been minimized.

Show comment
Hide comment
@daniel-sabourin

daniel-sabourin Aug 3, 2012

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

daniel-sabourin commented Aug 3, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Aug 8, 2012

Contributor

@Reyncor @daniel-sabourin

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

Contributor

johnbender commented Aug 8, 2012

@Reyncor @daniel-sabourin

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

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Aug 8, 2012

Contributor

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!

Contributor

johnbender commented Aug 8, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mmavko

mmavko Aug 9, 2012

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.

mmavko commented Aug 9, 2012

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

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Aug 9, 2012

Contributor

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

Contributor

johnbender commented Aug 9, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Aug 9, 2012

Contributor

@mmavko

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

Contributor

johnbender commented Aug 9, 2012

@mmavko

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

@daniel-sabourin

This comment has been minimized.

Show comment
Hide comment
@daniel-sabourin

daniel-sabourin Aug 9, 2012

@johnbender

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

daniel-sabourin commented Aug 9, 2012

@johnbender

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

@staabm

This comment has been minimized.

Show comment
Hide comment
@staabm

staabm Aug 28, 2012

Contributor

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

Contributor

staabm commented Aug 28, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Aug 28, 2012

Contributor

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

Contributor

toddparker commented Aug 28, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@staabm

staabm Aug 28, 2012

Contributor

Sorry , but i have no android device

Contributor

staabm commented Aug 28, 2012

Sorry , but i have no android device

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Aug 30, 2012

Contributor

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

Contributor

toddparker commented Aug 30, 2012

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

johnbender added a commit that referenced this issue Aug 30, 2012

johnbender added a commit that referenced this issue Aug 30, 2012

jaspermdegroot added a commit that referenced this issue Aug 30, 2012

@staabm

This comment has been minimized.

Show comment
Hide comment
@staabm

staabm Aug 31, 2012

Contributor

Perfect, thanks to you guys!

Contributor

staabm commented Aug 31, 2012

Perfect, thanks to you guys!

@robschmuecker

This comment has been minimized.

Show comment
Hide comment
@robschmuecker

robschmuecker Sep 17, 2012

Contributor

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.

Contributor

robschmuecker commented Sep 17, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 17, 2012

Member

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

Member

jaspermdegroot commented Sep 17, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment