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

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

Projects

None yet
@chenchen

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

@chenchen

It works, Thanks

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

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

FIXED with just CSS!

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

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

@argyleink

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

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

@Wilto Wilto added a commit that closed this issue Oct 21, 2011
@Wilto Wilto Fixes #1077, somewhat mysteriously. Re-checked native selects across …
…common devices/browsers, which seem unaffected by this change.
ac1832a
@Wilto Wilto closed this in ac1832a Oct 21, 2011
@jumpinjackie

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
Contributor

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
@Wilto Wilto was assigned Oct 24, 2011
@toddparker
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

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

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

@jumpinjackie

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

@Wilto Wilto added a commit that closed this issue Oct 26, 2011
@Wilto Wilto Fixes #1077, fixes #2683 — Reverts fixed positioning to hide .ui-coll…
…apsible-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.
6b85cdb
@Wilto Wilto closed this in 6b85cdb Oct 26, 2011
@mikebourg45

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

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 timmywil pushed a commit to timmywil/jquery-mobile that referenced this issue Nov 5, 2011
@Wilto Wilto Fixes #1077, fixes #2683 — Reverts fixed positioning to hide .ui-coll…
…apsible-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.
d195354
@naisayer

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

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

@iandevlin

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
Contributor

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

@iandevlin

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

@sh1k1-zz

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

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
Contributor

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

@iandevlin

Will do.

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