We are building a Backbone Application with Cordova for Android and IOS and it works perfectly except for this specific issue. When using a HTC One (Android 4.3) the following grey bar shows up, which is not present on any of our test-devices.
The things i already tried and did not work:
- Setting the webview background to a different color
- Setting a background-color to the Select or Option elements
- Trying to add the -webkit-tap-highlight-color: rgba(0,0,0,0); to the select or option
- Trying the -webkit-appearance:none; on the select or option
I am hoping someone else also came across this specific issue and can help me out with this!
HTML:
<li class="icon select">
<label data-model-attribute="type" onclick="" for="type">Type</label>
<select class="index" id="type" name="type" tabindex="0">
<option value="L">L</option>
<option value="B">B</option>
<option value="SLO>SLO</option>
<option value="SLI">SLI</option>
</select>
<b></b>
</li>
Computed layout Select (as far as i can tell)
-webkit-appearance: none;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-rtl-ordering: logical;
-webkit-writing-mode: horizontal-tb;
align-items: center;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(255, 0, 0, 0.4);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(0, 0, 153);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 153);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 153);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 153);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(0, 0, 153);
cursor: default;
display: block;
font-family: 'Lucida Grande';
font-size: 13px;
height: 39px;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(0, 0, 153);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
top: 0px;
white-space: pre;
width: 353px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 1049;
Computed layout Option
color: rgb(0, 0, 153);
cursor: default;
display: inline;
font-family: 'Lucida Grande';
font-size: 13px;
font-weight: normal;
height: auto;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre;
width: auto;
word-spacing: 0px;
Config.xml: (removed the namespace, name and description as they are not needed to know for this question)
<?xml version='1.0' encoding='utf-8'?>
<widget id="example" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Example App</name>
<description>
Example Description
</description>
<author email="example@example.com" href="http://www.example.com">
</author>
<content src="index.html" />
<access origin="*" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="true" />
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="backgroundColor" value="0xff000000" />
</widget>