I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
For a web application I'm building I want to use the unstyled input fields as they're being rendered by Chrome. On desktop that works fine and I get nice, thin borders around the inputs, but on chrome on android the rendering of the borders is a bit fickle. Depending on the height of the page they are rendered like this
I've made a codepen with several options in order to try to get a consistent rendering, but none of them seem to work predictably: https://codepen.io/dianabroeders/pen/XabXPG
All options i tried to get the rendering right:
.input1{
transform: scale(0.9999999);
}
.input2{
border: 1px solid #a9a9a9;
padding: 2px 1px;
}
.input3{
border-image: none;
}
.input4{
-webkit-appearance: none;
}
.input5{
border-style: solid;
border-width: thin;
border-color: #a9a9a9;
}
Is there a fix to reliably render an input with all borders showing, nice and thin, all the time on chrome on android and chrome on desktop? And the width and height staying the same as an unstyled input?
PS, i found this question, that helped me understand what was going on with the rendering...
I have a mobile friendly web app built using GWT/mGWT. The app has white input text boxes and dark gray input text. However, on Android Browser, the text shows up white-on-white and is thus invisible. All the CSS I tried fails to fix the problem
.my-textBox {
color: #555 !important;
background-color: #FFFFFF !important;
border: 1px solid #A8A8A8;
}
I am guessing that the colour of the text is being overwritten somewhere else in your stylesheet.
Try being more specific with your rule, such as #container input.my-textBox { ... }
Also, try putting the rule at the very end of your stylesheet and make sure that the stylesheet it's in is the very last stylesheet that's loaded when the browser loads the page.
Finally, make sure there's no inline CSS on the input element itself that's overriding your color rule.
why this */ ????
Try
input [type=text]{
color: #555;
background-color: #FFFFFF;
border: 1px solid #A8A8A8;
}
I'm developing application in Phonegap and have some styles on my textarea:
textarea {
background: url(img/ynxjD.png) repeat-y;
width: 600px;
height: 300px;
font: normal 14px verdana;
line-height: 25px;
padding: 2px 10px;
border: solid 1px #ddd;
}
Because Android browse has default styles on input elements and textarea like overlays and basically when I click on my textarea all styles dissappear and big ugly white rectangle with green corners appears, I found a workaround with this:
textarea {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
as mentioned here:
Disable Android browser's input overlays?
Everything is great, but when I write in the textarea and go to new line android keyboard dissapears and I need to click again to appear and that is with every new line.
I am testing on HTC desire X if that matters
I would be glad if someone help me fix this : )
I've got a web page with some text inputs. The Android browser (at least on Android 2.3.4 which is all I've got now) seems to overlay its own control over the input on the page on focus.
The problem is that the overlaid control is a white rectangle and it looks ugly. Is there a way to disable it, or style it somehow?
UPDATE:
Here is an example from the Android emulator:
The rounded corners and the background are lost. On the actual device, I don't even see a border around the control.
I should probably mention that I'm using jQuery Mobile. My test device is an HTC Evo 4G.
Related questions:
Input has different style on focus
Input-Elements in WebViews always have the same style if highlighted on HTC Devices
Finally, I solved this problem for Android 2.3 devices.
It is not possible to really remove the overlay, but it is possible to move the overlay outside the viewport.
The overlay tries to position itself to the same position as the input field.
It copies the width and the position offset which you assign with
position:relative
and
top:-10000px
But the overlay does not copy the position offsets which are assigned through
-webkit-transform: translate3d()
This causes several issues with JS libraries like iScroll.
But this also helps us to hide the overlay:
input[type="password"], input[type="text"]{
position:relative;
top:-10000px;
-webkit-transform: translate3d(0, 10000px, 0);
}
You place the input field outside the viewport. Overlay positions itself beside it. Now you use translate3d() for moving it to the old position.
We use this solution already in our mobile web framework "qooxdoo Mobile":
http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform
Following code will remove tap highlight - [Android 4.0.3]
input{
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:#3072af;
}
Not sure this is a working solution and answer, but my inputs started playing along on Android after commenting out these, which all created havoc on my Android (HTC2.3) text inputs and selects
/* really bad */
-webkit-backface-visibility: hidden;
/* your normal bad */
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
If you want to style default inputs, I'm using these:
/* native placeholder styling */
::-webkit-input-placeholder {
color:#555555;
}
:-moz-placeholder {
color:#555555;
}
.inField label {
color:#555555;
cursor: text;
}
After commenting out the first webkits, Android is working ok for me. I'm overriding plenty of other stuff, too though.
Also check out the screenshot below:
What I did with my inputs is create a listview, put all my inputs into list items and strip all input-JQM-CSS. This should give you a transparent input sitting on top of a listview item, which I think looks really good. You can also add labels to the inputs, my example is set up to work with the inField label plugin, so you have all these classes on board already, too.
The screenshot is from my Android HTC 2.3.5 and shows an input type="search". It's a listview search filter, which I stripped of most JQM-css. I have removed it from the listview further down, placed it into my form-list, added a label (can't see if active) and stripped all CSS, including icons.
Here is an example of how I'm doing my list-forms:
<ul data-role="listview" data-inset="true" class="inputList">
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item">item</label>
<input type="text" name="item" id="item" />
</div></div>
</li>
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item2">item2</label>
<input type="text" name="item2" id="item2" />
</div></div>
</li>
</ul>
CSS:
.inputList li div.ui-btn-inner {
background: none;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
}
.inputList label {
margin: 3px 0 0 !important;
}
// styling of text inputs!
.inputList input.ui-input-text, .inputList textarea.ui-input-text {
width: 93%;
margin-left: 1%;
padding: 0.6em 0;
text-indent: 80px; /* hard-coded - doesn't work on Android */
border-width: 0px;
background: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius:0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner {
padding: 0px !important;
}
// labels, from inField label plugin, but not active
.inField {
position:relative
}
.inField label {
line-height: 2.25em;
vertical-align: middle;
position:absolute;
left:8pt;
width: inherit !important;
}
I hope this is all CSS. If you are trying to set this up and it looks crummy, let me know.
Working like this looks very nice on my HTC 2.3.4 My CSS still needs some polishing. I need to decrease the inputs width and align: center, so the borders of the below list item stay visible.
Other than that this would be a nice solution to crummy Android inputs. Just strip all JQM-CSS and put a listview-li behind.
Here is my code:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
I'm just taking a guess here, and you've probably already tried, but
-webkit-appearance: none;
may do the trick. I've not even got an android device, but on iphone that sorts out most input related styling problems as it strips out the default browser applied styling completely. Worth a shot anyway!
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline-style: none;
This will working fine in Android 4.0 but when you use this code for numeric Input field doesn't support bcoz of read-write-plaintext-only, i got this problem, please anyone suggest.
#czuendorf, May 13 at 13:53:
Worked for me too (also Android 4.0).
However... if you use an input with type="number" then the numeric keyboard does not pop-up anymore when you enter the field, but the regular keyboard is shown instead.
If you remove -webkit-user-modify, then the right keyboard is shown again, but the input element is shown with a border while it is being edited.
In my case the input overlay messed up the layout (moved some content down and right), but this does not happen anymore with this new css code.
I confirm the macnerd analysis of the czuendorf patch. These behaviors vary widely from one android version to another. I tested it on a real Htc device with android 4.0.3 and the outline disappeared (great!) but it opens some serious keyboard issues (I see that the single keypress is not shown in the field, and other strange behaviors...). In the emulator no keyboard issue occur. I've not found any solution for the real device. It's a shame!