Select tag not properly styled on stock android browser

[ADmad]

As shown in screenshot the select tag is not properly styled.
Tested on stock browser on android 4.1.2 and 4.2.1.

[cvrebert]

X-Ref: #7693
Note that we technically don't officially support the non-Chrome Android Browser.

[ADmad]

You don't officially support the stock browser of the mobile platform which has the largest market share?
That's quite an interesting stand point for a framework which boasts to be "mobile first". It would be nice if this fact was explicitly stated on the "Browser Support" section of the docs.

[ElijahFowler]

Might I say that the stock browser on Android is Chrome since Android 4.1. Although the usage of the Android Browser is still pretty high...

[ADmad]

@ElijahFowler The pre installed "stock" browser is not chrome. You need to install chrome from play store.

[juthilo]

@ADmad Elijah is right: Google has made Chrome the default browser on Android since version 4.1. This doesn't change hardware manufacturers from including a custom stock browser though. AFAIK, however, there is no true one former stock Android browser - feature support changes from device to device which is probably why we can't support it. Chrome on the other hand can be tested against quite easily.

[cvrebert]

The Android Browser has also been pretty buggy (case in point: this issue!) and is often outdated due to infrequent manufacturer software updates.

[ADmad]

Yeah the fact remains lot of manufacturers still have the android browser as default even on newer models. Just as we were rejoicing the death of ie6/ie7, android browser takes its place to haunt us 😬

[mdo]

Duplicate of #7693. The only way around this is no background-image, or a gnarly hack. Unsure if I want to even include that in Bootstrap, but it might make sense given the prevalence of Android's stock browser.

Thoughts folks?

[ADmad]

Just wanted to point out the issue also occurs with android's WebView component on android 4.1 and 4.2 which is used by mobile apps built using html5, JS. And currently there are no practical alternative available for it.

[cvrebert]

A relevant issue: https://code.google.com/p/android/issues/detail?id=48379

[cvrebert]

Perhaps we could move the offending properties within a input&, textarea& { block? (If not for IE8, I would say &:not(select) {.)

[mdo]

Problem is we still need to style the select elements. And we need to set the background-color for them with to work in Chromium: 4bf93a2.

[cvrebert]

Hmm, it's been a year since that commit. Have we checked that it's still a problem in current Linux Chromium and iOS Safari?

[mdo]

Nope 😁, not yet. I have a Ubuntu VM now, so I can give it for 3.0.2.

[ADmad]

@cvrebert On latest Google Chrome 30.0.1599.101 at least removing the background color for select makes the background grey.

[cvrebert]

Complete shot in the dark (haven't tested it either):

/* Mashed-up from http://browserhacks.com/#an */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width:0\0) {
  /* "Android Browser"-specific CSS */
  select.form-control {
    background-color: white;/* or is there a better way to reset this? */
    /* ???: also reset the border somehow... */
  }
}

[michaelcarter]

For what it's worth, this bug is causing some fairly significant issues on our Cordova project, any solutions people know of would be very much appreciated.

[carasmo]

Okay, I found a MUCH BETTER way of fixing this. It works great. Ignore all other crap I posted.

<script>
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');

}
</script>

This, as you can see, avoids Mozilla and Chrome, so the user gets the default select on the following browsers:

Android Stock
Sleipnir Mobile 2.12
Dolphin Mobile 10
Maxthon Mobile 4

Just tested it thoroughly.

Found in both answers here: http://stackoverflow.com/a/15591516/1004312

[carasmo]

http://stackoverflow.com/a/15591516/1004312

This comment has a user agent string way to sniff it. My elaborate and annoying fix works too but it's a pain in the rear. Unfortunately the default browser even with 4.1 android devices is still the stock android browser according to the comments I've been reading.

[mdo]

The only other solution to this is to not use .form-control on select menus on Android devices. That's a shitty answer and it's not even close to a solution, but it's all there is to do save for those other lengthy hacks. Sorry folks :(.

[carasmo]

Okay, I found a MUCH BETTER way of fixing this. It works great. Ignore all other crap I posted.

<script>
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');

}
</script>

This, as you can see, avoids Mozilla and Chrome, so the user gets the default select on the following browsers:

Android Stock
Sleipnir Mobile 2.12
Dolphin Mobile 10
Maxthon Mobile 4

Just tested it thoroughly.

Found in both answers here: http://stackoverflow.com/a/15591516/1004312

[mdo]

@carasmo You've done the research, any chance you can put together a pull request for the Browser compatibility section of the docs to detail this? I'd love you to get the commit credits if you want them.

Only feedback I have is that we should detail just how sensitive the stock browser is (background, border, etc cause this bug) and we should include a jsbin with the fix in action.

Let me know if you're down otherwise I can jump in and do it.

[carasmo]

@mdo : I have all that you need here:

http://jsbin.com/iMuRULA/3

I've never done a pull request, though I can probably figure it out, but I have looked at the docs and my lack of markup chops would give me more gray hair at this time. I intend to contribute further when I finish this huge project I'm on right now.

[mdo]

@carasmo You seem to have a decent handle on things ;). GitHub has a great guide for pull requests whenever you want to check it out: https://help.github.com/articles/using-pull-requests. I'd say find something super small with Bootstrap or another project and give the PR a go—we can help you from there.

Thanks for putting everything together. Just pushed an update to the docs for it.

[allartk]

For anyone finding this issue in search for a solution. By combining various sources, I ended up with:

if ('WebkitAppearance' in document.documentElement.style && navigator.userAgent.indexOf('Chrome') === -1) {     
$("html").addClass("browser-android");      
}

And in my css

.browser-android select {    
  -webkit-appearance: listbox;
  background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==); /* a simple arrow img */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

[cvrebert]

Guidance on this problem is now included in the official docs: http://getbootstrap.com/getting-started/#support-android-stock-browser

[DanielRuf]

So it is better to not use Bootstrap at the moment as it does not support Android (Gingerbread and newer)? Do other frameworks have the same issues? Like someone already wrote: Android is now treated like Internet Explorer (6-7)

Not so good for most projects, not ok at all. Not so mobile-first =(

[carasmo]

It has nothing to do with Bootstrap. It's not the framework it's CSS. Android's default browser has a lot of "bugs and inconsistencies with CSS". Android's browser does support media queries, so you can use mobile first, you just have to use workarounds, like the ones in this thread, when you come across issues like the one with the select or others. This is the same as what you would do with any framework or no framework.

[DanielRuf]

@carasmo Sure, but we can not leave these issues unresolved as there are even more issues: #12762

And I think jQuery Mobile as an example resolves such issues in their framewokr and does not leave them unresolved. It is better to have working workarounds or fixes included in Bootstrap than searching for the same solution when we see the issue again. Or what do you think?

Anyway, is this fix already merged as pull request in the official Bootstrap repo?

[carasmo]

If Bootstrap was a mobile only solution, then it should include, but it's not. You can always detect server side and serve up jQuery Mobile to mobile users and for all others use Bootstrap or a combo of both. It's up to the developer and the needs of the particular situation.

[carasmo]

The fix is applied as needed: http://getbootstrap.com/getting-started/#support-android-stock-browser

[DanielRuf]

It is mobile first. jQuery Mobile was just an example as it works also on older browsers and on Android (Gingerbread). Also pdf.js by Mozilla has fixes for Android (Gingerbread), but Twitter Bootstrap not.

Mixing multiple frameworks is not an option for most projects.

But this fix is not included in the official repo, so we have to know where to look for the code snippet.

[cvrebert]

@mdo So, is user-agent sniffing where you're drawing the line on what goes in the framework itself vs. what goes in the docs, or...?

[mdo]

@cvrebert Yeah, historically I haven't wanted to get into that.

@DanielRuf We have fixes for plenty of browser bugs. This one is not so easy to fix, and we don't like including shitty code into the framework to appease a rather poorly done implementation of CSS.

[DanielRuf]

Ok, I hope this will get fixed in an upcoming major release.