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

Native select Menu no event on Adroid 2.2 or above #1077

Closed
chenchen opened this Issue Feb 14, 2011 · 33 comments

Comments

Projects
None yet
@chenchen

chenchen commented Feb 14, 2011

I am using select Menu with no role(native select menu), It works ok on the Android 2.1 and 1.6 devices. When i run it on the Android 2.2 device, there is no select menu pop out. It seems the select menu didn't receive events.

@davibe

This comment has been minimized.

Show comment
Hide comment
@davibe

davibe Feb 15, 2011

Contributor

the same happens here. I don't knw what did chebchen mean by "with no role" but I'm using data-native-menu="true" . any clue ?

Contributor

davibe commented Feb 15, 2011

the same happens here. I don't knw what did chebchen mean by "with no role" but I'm using data-native-menu="true" . any clue ?

@w00tazn

This comment has been minimized.

Show comment
Hide comment
@w00tazn

w00tazn Feb 23, 2011

My Samsung Galaxy S with Samsung's Froyo has a customized native select that doesn't show up when using JQM. Haven't seen this issue on other 2.2 devices with a stock native select.

w00tazn commented Feb 23, 2011

My Samsung Galaxy S with Samsung's Froyo has a customized native select that doesn't show up when using JQM. Haven't seen this issue on other 2.2 devices with a stock native select.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Mar 9, 2011

Contributor

I just tested this on on both our Android 2.2 devices (HTC Incredible and Droid) and both the 100% native selects (data-role="none") and the native menu selects (data-native-menu="true") both work fine. Can you re-test on the latest:

native select:
http://jquerymobile.com/test/docs/forms/forms-all-native.html

native menu:
http://jquerymobile.com/test/docs/forms/forms-selects.html

Cheers,
Todd

Contributor

toddparker commented Mar 9, 2011

I just tested this on on both our Android 2.2 devices (HTC Incredible and Droid) and both the 100% native selects (data-role="none") and the native menu selects (data-native-menu="true") both work fine. Can you re-test on the latest:

native select:
http://jquerymobile.com/test/docs/forms/forms-all-native.html

native menu:
http://jquerymobile.com/test/docs/forms/forms-selects.html

Cheers,
Todd

@chenchen

This comment has been minimized.

Show comment
Hide comment
@chenchen

chenchen Mar 12, 2011

It works, Thanks

chenchen commented Mar 12, 2011

It works, Thanks

@blq

This comment has been minimized.

Show comment
Hide comment
@blq

blq Oct 13, 2011

This needs to be reopened.
I've tested today's "test" pages on HTC Desire, HTC Legend, Samsung Galaxy Tab.
I notice that almost always the native select menus don't work when transitioning to the page with the select menu. But if you reload the same page it works. I.e seems to be some timing issue(?) ajax, page cache? RC1 seems to work, can't reproduce currently.

(bunch of similar issues it seems, #897, #1830, #1051 etc).

blq commented Oct 13, 2011

This needs to be reopened.
I've tested today's "test" pages on HTC Desire, HTC Legend, Samsung Galaxy Tab.
I notice that almost always the native select menus don't work when transitioning to the page with the select menu. But if you reload the same page it works. I.e seems to be some timing issue(?) ajax, page cache? RC1 seems to work, can't reproduce currently.

(bunch of similar issues it seems, #897, #1830, #1051 etc).

@toddparker toddparker reopened this Oct 14, 2011

@argyleink

This comment has been minimized.

Show comment
Hide comment
@argyleink

argyleink Oct 18, 2011

build is using "latest" syntax for jquery mobile builds: Device Android G2 running 2.3

  • visited 2 test pages for selects with no native select menu showing
  • my select menu's dont live on a "transition to" page, the page is the first landing page of the app, no page cache.
  • setting opacity in css didnt fix the bug.
  • setting data-role to none doesnt fix issue, when tapped it has no reaction
  • the select appears to be in focus/highlighting but the menu options arent visible (when data-role is NOT set to none)
  • tried many menu items and a couple menu items, no change

i'm especially concerned with this one since i was able to use native menu selects a few weeks ago. my form is considerably more intense now, but my phone didnt pop the select menu options in the test pages supplied either

argyleink commented Oct 18, 2011

build is using "latest" syntax for jquery mobile builds: Device Android G2 running 2.3

  • visited 2 test pages for selects with no native select menu showing
  • my select menu's dont live on a "transition to" page, the page is the first landing page of the app, no page cache.
  • setting opacity in css didnt fix the bug.
  • setting data-role to none doesnt fix issue, when tapped it has no reaction
  • the select appears to be in focus/highlighting but the menu options arent visible (when data-role is NOT set to none)
  • tried many menu items and a couple menu items, no change

i'm especially concerned with this one since i was able to use native menu selects a few weeks ago. my form is considerably more intense now, but my phone didnt pop the select menu options in the test pages supplied either

@argyleink

This comment has been minimized.

Show comment
Hide comment
@argyleink

argyleink Oct 20, 2011

FIXED with just CSS!

.ui-page { -webkit-backface-visibility:visible !important; }

argyleink commented Oct 20, 2011

FIXED with just CSS!

.ui-page { -webkit-backface-visibility:visible !important; }

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 21, 2011

Contributor

Are you able to reproduce this on my docs page links above in 2.2?
The backface trick may help, but uses a lot of memory so the browser could get unstable. Seems that that this would fix things.

Contributor

toddparker commented Oct 21, 2011

Are you able to reproduce this on my docs page links above in 2.2?
The backface trick may help, but uses a lot of memory so the browser could get unstable. Seems that that this would fix things.

@argyleink

This comment has been minimized.

Show comment
Hide comment
@argyleink

argyleink Oct 21, 2011

sorry i should have been more specific, i tested the above solution on a G2 with 2.3. i can't say if it's a solution to 2.2

argyleink commented Oct 21, 2011

sorry i should have been more specific, i tested the above solution on a G2 with 2.3. i can't say if it's a solution to 2.2

@jumpinjackie

This comment has been minimized.

Show comment
Hide comment
@jumpinjackie

jumpinjackie Oct 21, 2011

I too am experiencing un-usable native select menus. I'm using stock Android Gingerbread browser (2.3) on a Nexus One

Even the native menus on the 1.0RC2 demo page (http://jquerymobile.com/demos/1.0b2/docs/forms/selects/index.html) do not work.

jumpinjackie commented Oct 21, 2011

I too am experiencing un-usable native select menus. I'm using stock Android Gingerbread browser (2.3) on a Nexus One

Even the native menus on the 1.0RC2 demo page (http://jquerymobile.com/demos/1.0b2/docs/forms/selects/index.html) do not work.

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Oct 21, 2011

Contributor

@jumpinjackie

I think you meant to link to latest. But either way I can reproduce.

@toddparker @Wilto

Bisect points to be7f74262b2c32f1d30d0497cf5f63bdeb23dc18. No clue why that causes the problem but if you checkout the commit before it works, and the commit after it's broken.

[edit] and now I'm going to sleep.

Contributor

johnbender commented Oct 21, 2011

@jumpinjackie

I think you meant to link to latest. But either way I can reproduce.

@toddparker @Wilto

Bisect points to be7f74262b2c32f1d30d0497cf5f63bdeb23dc18. No clue why that causes the problem but if you checkout the commit before it works, and the commit after it's broken.

[edit] and now I'm going to sleep.

@Wilto Wilto closed this in ac1832a Oct 21, 2011

@jumpinjackie

This comment has been minimized.

Show comment
Hide comment
@jumpinjackie

jumpinjackie Oct 24, 2011

select menus are still fubar on Android even with this fix.

The only cases where select menus will work at the moment are it is fully native (data-role="none" and un-styled by JQM) or it uses a custom menu (which is horribly slow on Android).

The default styled select with native menu options still does not work.

Look at these pages:

http://jquerymobile.com/test/docs/forms/forms-all.html

http://jquerymobile.com/test/docs/forms/selects/

Tap any select menu on these pages that doesn't have custom menu options. They still do nothing.

I am using the stock Android gingerbread (2.3) browser on a Nexus One. The same behaviour can be observed through the Gingerbread emulator.

Another data point to add is that this was working in 1.0 RC1. Whatever broke this was committed after RC1.

jumpinjackie commented Oct 24, 2011

select menus are still fubar on Android even with this fix.

The only cases where select menus will work at the moment are it is fully native (data-role="none" and un-styled by JQM) or it uses a custom menu (which is horribly slow on Android).

The default styled select with native menu options still does not work.

Look at these pages:

http://jquerymobile.com/test/docs/forms/forms-all.html

http://jquerymobile.com/test/docs/forms/selects/

Tap any select menu on these pages that doesn't have custom menu options. They still do nothing.

I am using the stock Android gingerbread (2.3) browser on a Nexus One. The same behaviour can be observed through the Gingerbread emulator.

Another data point to add is that this was working in 1.0 RC1. Whatever broke this was committed after RC1.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 24, 2011

Contributor

I can still reproduce this issue too. I'll re-open, this is a priority to fix this week.

Contributor

toddparker commented Oct 24, 2011

I can still reproduce this issue too. I'll re-open, this is a priority to fix this week.

@toddparker toddparker reopened this Oct 24, 2011

@ghost ghost assigned Wilto Oct 24, 2011

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 24, 2011

Contributor

I just cleared cache and it seems to be working fine on both our 2.2 and 2.3 devices here:
http://jquerymobile.com/test/docs/forms/forms-all.html

Can you re-test @jumpinjackie

Contributor

toddparker commented Oct 24, 2011

I just cleared cache and it seems to be working fine on both our 2.2 and 2.3 devices here:
http://jquerymobile.com/test/docs/forms/forms-all.html

Can you re-test @jumpinjackie

@blq

This comment has been minimized.

Show comment
Hide comment
@blq

blq Oct 24, 2011

I believe I found an interesting pattern - On the Samsung Galaxy Tab (1:st gen) the native select menus now initially work, until you've opened a custom select menu. Tested on example page by opening custom menu first (cache cleared).
Seems to work on a HTC Legend though.

blq commented Oct 24, 2011

I believe I found an interesting pattern - On the Samsung Galaxy Tab (1:st gen) the native select menus now initially work, until you've opened a custom select menu. Tested on example page by opening custom menu first (cache cleared).
Seems to work on a HTC Legend though.

@davidlilin

This comment has been minimized.

Show comment
Hide comment
@davidlilin

davidlilin Oct 24, 2011

It can be always reproduced on Android 2.3 by starting from http://jquerymobile.com/test/docs/forms/index.html, and then click Form element gallery link, then click select menu.

davidlilin commented Oct 24, 2011

It can be always reproduced on Android 2.3 by starting from http://jquerymobile.com/test/docs/forms/index.html, and then click Form element gallery link, then click select menu.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 24, 2011

Contributor

Interesting. So in my testing if you refresh the form gallery page the selects will work until you hit a custom select mneu as @blq says BUT if you navigate to the page via Ajax, like @daviddillin said, they are indeed broken from the start so you're both right. A very odd issue.

Contributor

toddparker commented Oct 24, 2011

Interesting. So in my testing if you refresh the form gallery page the selects will work until you hit a custom select mneu as @blq says BUT if you navigate to the page via Ajax, like @daviddillin said, they are indeed broken from the start so you're both right. A very odd issue.

@jumpinjackie

This comment has been minimized.

Show comment
Hide comment
@jumpinjackie

jumpinjackie Oct 25, 2011

Confirmed the findings of @blq and @davidlilin on both my Nexus One (2.3) and the Gingerbread emulator.

jumpinjackie commented Oct 25, 2011

Confirmed the findings of @blq and @davidlilin on both my Nexus One (2.3) and the Gingerbread emulator.

@mikebourg45

This comment has been minimized.

Show comment
Hide comment
@mikebourg45

mikebourg45 Oct 28, 2011

Still having problem on SGS2 android 2.3.3 with native browser and dolphin browser after applying this fix in the css : .ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }

Also seeing the same problem on HTC wildfire native browser android 2.3.3

mikebourg45 commented Oct 28, 2011

Still having problem on SGS2 android 2.3.3 with native browser and dolphin browser after applying this fix in the css : .ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }

Also seeing the same problem on HTC wildfire native browser android 2.3.3

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Oct 28, 2011

Contributor

@mikebourg45: Are you using the latest JS/CSS from the repo? It’s incredibly difficult to track down these issues piecemeal—if you could set up a test case (using a service like jsfiddle) that links to the JS/CSS on http://jquerymobile.com/test/ that can recreate the issue, it would facilitate us finding a fix in a big way. Thanks!

Contributor

Wilto commented Oct 28, 2011

@mikebourg45: Are you using the latest JS/CSS from the repo? It’s incredibly difficult to track down these issues piecemeal—if you could set up a test case (using a service like jsfiddle) that links to the JS/CSS on http://jquerymobile.com/test/ that can recreate the issue, it would facilitate us finding a fix in a big way. Thanks!

@mikebourg45

This comment has been minimized.

Show comment
Hide comment
@mikebourg45

mikebourg45 Oct 28, 2011

Hi,

good news, after testing http://jquerymobile.com/test/ with my mobile
device, it seem to work. It wasn't with the RC2.

so it's probably a problem with our css even if we tested it with RC2 js/css
and added the fix mention in the bug.

Regards!

On Fri, Oct 28, 2011 at 10:24 AM, Mat Marquis <
reply@reply.github.com>wrote:

@mikebourg45: Are you using the latest JS/CSS from the repo? Its
incredibly difficult to track down these issues piecemealif you could set
up a test case (using a service like jsfiddle) that links to the JS/CSS on
http://jquerymobile.com/test/ that can recreate the issue, it would
facilitate us finding a fix in a big way. Thanks!

Reply to this email directly or view it on GitHub:
#1077 (comment)

mikebourg45 commented Oct 28, 2011

Hi,

good news, after testing http://jquerymobile.com/test/ with my mobile
device, it seem to work. It wasn't with the RC2.

so it's probably a problem with our css even if we tested it with RC2 js/css
and added the fix mention in the bug.

Regards!

On Fri, Oct 28, 2011 at 10:24 AM, Mat Marquis <
reply@reply.github.com>wrote:

@mikebourg45: Are you using the latest JS/CSS from the repo? Its
incredibly difficult to track down these issues piecemealif you could set
up a test case (using a service like jsfiddle) that links to the JS/CSS on
http://jquerymobile.com/test/ that can recreate the issue, it would
facilitate us finding a fix in a big way. Thanks!

Reply to this email directly or view it on GitHub:
#1077 (comment)

timmywil pushed a commit to timmywil/jquery-mobile that referenced this issue Nov 5, 2011

Fixes jquery#1077, fixes jquery#2683 — Reverts fixed positioning to h…
…ide .ui-collapsible-heading-status (added in commit #c94c6bf). Uses ‘top: -9999px’ to hide element in lieu of ‘left: -9999px’, so as not to trigger Firefox 7’s ellipsis bug.
@naisayer

This comment has been minimized.

Show comment
Hide comment
@naisayer

naisayer Jan 18, 2012

Anyone still have this issue ?

We have a case where the select doesn't show with Android 2.2.... here is an example:

http://fiddle.jshell.net/hHqgg/show/

naisayer commented Jan 18, 2012

Anyone still have this issue ?

We have a case where the select doesn't show with Android 2.2.... here is an example:

http://fiddle.jshell.net/hHqgg/show/

@randylsu

This comment has been minimized.

Show comment
Hide comment
@randylsu

randylsu Feb 16, 2012

I am seeing the same behavior as naisayer on my application. Don't have a public link because we are in the middle of launching. We used this same code last yr with one of the jqm betas & only saw issues on phones w/ older android builds, but now seeing on all.

randylsu commented Feb 16, 2012

I am seeing the same behavior as naisayer on my application. Don't have a public link because we are in the middle of launching. We used this same code last yr with one of the jqm betas & only saw issues on phones w/ older android builds, but now seeing on all.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 16, 2012

Contributor

Unfortunately, the Android browser is very fragile when various CSS properties and select menus are combined. We've had so many issues with seemingly unrelated CSS properties like overflow: killing the select menus on Android. The only advice I can offer is to carefully test each CSS property all the way up the tree and you'll find soemthing random that makes Android freak out. Wish I had a better solution :/

#2066

Contributor

toddparker commented Feb 16, 2012

Unfortunately, the Android browser is very fragile when various CSS properties and select menus are combined. We've had so many issues with seemingly unrelated CSS properties like overflow: killing the select menus on Android. The only advice I can offer is to carefully test each CSS property all the way up the tree and you'll find soemthing random that makes Android freak out. Wish I had a better solution :/

#2066

@iandevlin

This comment has been minimized.

Show comment
Hide comment
@iandevlin

iandevlin Feb 22, 2012

I had this issue too with the latest jQuery Mobile (1.0.1) but argyleink's fix mentioned above (adding .ui-page { -webkit-backface-visibility:visible !important; } to my CSS), fixed it.

Very very strange.

iandevlin commented Feb 22, 2012

I had this issue too with the latest jQuery Mobile (1.0.1) but argyleink's fix mentioned above (adding .ui-page { -webkit-backface-visibility:visible !important; } to my CSS), fixed it.

Very very strange.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 22, 2012

Contributor

Be careful with backface because it consumes a lot of memory and result in slowness or crashes.

Contributor

toddparker commented Feb 22, 2012

Be careful with backface because it consumes a lot of memory and result in slowness or crashes.

@iandevlin

This comment has been minimized.

Show comment
Hide comment
@iandevlin

iandevlin Feb 22, 2012

Hmm, do you have any other suggested fixes then?

On 22 Feb 2012 20:03, "Todd Parker" <
reply@reply.github.com>
wrote:

Be careful with backface because it consumes a lot of memory and result in
slowness or crashes.


Reply to this email directly or view it on GitHub:
#1077 (comment)

iandevlin commented Feb 22, 2012

Hmm, do you have any other suggested fixes then?

On 22 Feb 2012 20:03, "Todd Parker" <
reply@reply.github.com>
wrote:

Be careful with backface because it consumes a lot of memory and result in
slowness or crashes.


Reply to this email directly or view it on GitHub:
#1077 (comment)

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 22, 2012

Contributor

@iandevlin - You can use that, but you should do a fair amount of testing to make sure less powerful devices dont' get crashy. Unfortunately, Android's browser is very odd so I don't have specific suggestions except to test thoroughly. We've run into this issue a bunch of times.

Contributor

toddparker commented Feb 22, 2012

@iandevlin - You can use that, but you should do a fair amount of testing to make sure less powerful devices dont' get crashy. Unfortunately, Android's browser is very odd so I don't have specific suggestions except to test thoroughly. We've run into this issue a bunch of times.

@sh1k1-zz

This comment has been minimized.

Show comment
Hide comment
@sh1k1-zz

sh1k1-zz Feb 22, 2012

I have the same problem on Android 2.2 but just with Samsung devices. Does anyone know how to fix this? i have tried using diferent jquery.mobile.min ; jquery.mobile-1.0.1.min ; jquery.mobile-1.0a4.1.min ; but this is not working.

sh1k1-zz commented Feb 22, 2012

I have the same problem on Android 2.2 but just with Samsung devices. Does anyone know how to fix this? i have tried using diferent jquery.mobile.min ; jquery.mobile-1.0.1.min ; jquery.mobile-1.0a4.1.min ; but this is not working.

@iandevlin

This comment has been minimized.

Show comment
Hide comment
@iandevlin

iandevlin Feb 23, 2012

I initially set up the theme via the ThemeRoller. The CSS file that this generated contains the line:

/* bug fix */
.ui-page {
-webkit-backface-visibility: hidden;
}

but fails to say which bug it's fixing. If I remove this line (and obviously the line setting the same property to visible), the select appears to work fine (only tested on a HTC Desire).

edit
I quickly created another theme via ThemeRoller which this time didn't contain the offending CSS line above. Either it's changed recently or I added it myself (which I don't believe I did as I would have commented it better).

iandevlin commented Feb 23, 2012

I initially set up the theme via the ThemeRoller. The CSS file that this generated contains the line:

/* bug fix */
.ui-page {
-webkit-backface-visibility: hidden;
}

but fails to say which bug it's fixing. If I remove this line (and obviously the line setting the same property to visible), the select appears to work fine (only tested on a HTC Desire).

edit
I quickly created another theme via ThemeRoller which this time didn't contain the offending CSS line above. Either it's changed recently or I added it myself (which I don't believe I did as I would have commented it better).

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 24, 2012

Contributor

Hmmm...well, if you figure out how to reproduce, please open a ticket on the TR tracker.

Contributor

toddparker commented Feb 24, 2012

Hmmm...well, if you figure out how to reproduce, please open a ticket on the TR tracker.

@iandevlin

This comment has been minimized.

Show comment
Hide comment
@iandevlin

iandevlin commented Feb 24, 2012

Will do.

@forrest

This comment has been minimized.

Show comment
Hide comment
@forrest

forrest Aug 22, 2012

Some people hide the backface as it supposedly makes css3 transitions smoother on IOS (I heard this in regards to phonegap). Removing the line fixed the problem for me also.

Thanks!

forrest commented Aug 22, 2012

Some people hide the backface as it supposedly makes css3 transitions smoother on IOS (I heard this in regards to phonegap). Removing the line fixed the problem for me also.

Thanks!

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