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

Android 4.1 with Chrome - Select on footer with data-position="fixed" no response #5140

Closed
dandawong opened this Issue Oct 8, 2012 · 3 comments

Comments

Projects
None yet
3 participants
@dandawong

dandawong commented Oct 8, 2012

When i use Android 4.1 with Chrome to test the page with select box on a fixed position footer, the select box just has no response when i tap the screen and toggle the visibility of the fixed footer, here is the test page:

http://jsbin.com/iyenuv/1/

I also test it with the original browser and firefox on Android 4.1, which has no problem, also the device i use to test is Galaxy Nexus.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Oct 8, 2012

Member

@dandawong

Thanks for reporting the issue.

The cause of it is exactly the same as #4663. On Chrome for Android overflow: hidden; in a fixed toolbar makes buttons unresponsive when you scroll the page.

In this case we use overflow: hidden; for .ui-select .ui-btn. We have to see if we can do without that without causing other issues.

We also have to test if this Chrome bug is causing issues when using ui-grid or ui-bar in fixed toolbars because those classes have overflow set to hidden as well.

Member

jaspermdegroot commented Oct 8, 2012

@dandawong

Thanks for reporting the issue.

The cause of it is exactly the same as #4663. On Chrome for Android overflow: hidden; in a fixed toolbar makes buttons unresponsive when you scroll the page.

In this case we use overflow: hidden; for .ui-select .ui-btn. We have to see if we can do without that without causing other issues.

We also have to test if this Chrome bug is causing issues when using ui-grid or ui-bar in fixed toolbars because those classes have overflow set to hidden as well.

@dandawong

This comment has been minimized.

Show comment
Hide comment
@dandawong

dandawong Oct 9, 2012

After override the overflow: hidden; for .ui-select .ui-btn to overflow: visible !important;, it does fix the problem when the page first load, but after tap the screen and toggle the toolbar, the select box become no response, finally i found that if you also override the -webkit-transform: translateY(0); to -webkit-transform: inherit !important; for .slideup.in, it work for the issue.

Here is the css and the test page http://jsbin.com/iyenuv/3

.ui-select {
  overflow: visible !important;
}
.ui-btn {
  overflow: visible !important;
}
.slideup.in {
    -webkit-transform: inherit !important;
}

dandawong commented Oct 9, 2012

After override the overflow: hidden; for .ui-select .ui-btn to overflow: visible !important;, it does fix the problem when the page first load, but after tap the screen and toggle the toolbar, the select box become no response, finally i found that if you also override the -webkit-transform: translateY(0); to -webkit-transform: inherit !important; for .slideup.in, it work for the issue.

Here is the css and the test page http://jsbin.com/iyenuv/3

.ui-select {
  overflow: visible !important;
}
.ui-btn {
  overflow: visible !important;
}
.slideup.in {
    -webkit-transform: inherit !important;
}

@ghost ghost assigned Wilto Oct 15, 2012

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Oct 15, 2012

Contributor

Dibs. Looking into this now.

Contributor

Wilto commented Oct 15, 2012

Dibs. Looking into this now.

@Wilto Wilto closed this in 67e6fbc Oct 16, 2012

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