I'm working on a webapp also to be used on small smartphones. One of the fields in a form is a time input field. I need this to be nice and small and a width of 55px does the trick on most OS and browsers.
<input type="time" value="12:34" style="width:55px">
However, Android Chrome always has some additional space:
When I add a "-webkit-appearance: none" the arrow disapears but leaves an empty space, so my time is still chopped off.
I have tried many controlls and those solved other issues in Chrome on my desktop (spin-button, clear-button, etc). But nothing I found removes it in Android Chrome.
Does anyone know how to get rid of this?
Tested on Android 5 and 6 both with Chrome 56.
Quick example https://jsfiddle.net/nm97kvk0/2/
I tried this
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
with
::-webkit-inner-spin-button,
::-webkit-outer-spin-button,
::-webkit-clear-button,
::-webkit-calendar-picker-indicator
It works with desktop. There is no arrow in Android Chrome, but background under arrow is still there and overlay part of last digit(
Desktop Chrome
Android Chrome
The question is about the standard browser showing the HTML5 page, not the WebView
The test device is Galaxy Tab 10.1, though this was also seen on iPad.
The page has a form. The form has fixed width and
margin-left: auto;
margin-right: auto;
When I touch and hold the page body (outside of the form), one of the form inputs (usually the 1st one, though sometimes the 2nd) is focused (and the on-screen keyboard is shown).
Any explanation why this behavior?
Any idea how to prevent it?
Use the HTML5 autofocus attribute to force the browser to initially focus on the element you want.
<input autofocus="autofocus" />
Older browsers will ignore the attribute.
i've faced some strange problem with absolutely positioned divs and text inputs.
For example(just some short snipped):
<div><input value="normal"/></div>
<div style="position: absolute;"><input value="positioned"/></div>
The trick here is that you can easily input any symbol in 'normal' field but you can't do this in 'positioned' field - for example, you could type english text but danish or japan letters are just ignored...
Has anyone solved similar problem?
P.S. It's tested on PhoneGap
UPD. More tests tells that problem is somehow bounded with focus problem on 'positioned' element.
OK, i don't know why but the problem was in this css rule
html, body{-webkit-font-smoothing: subpixel-antialiased;-webkit-backface-visibility: hidden; overflow: hidden; /* Force webkit to use sub-pixel antialiasing */}
I am having an issue with the content of a label being automatically inserted as a watermark inside an input. I have tested this on a range of phones and browsers but it seems to only happen on the HTC EVO (3D X515A). When I give it focus (e.g. touch the input) the text disappears, similar to the placeholder attribute of an input. There is also no auto-population with js.
I have tried searching to see if this is a new standard on Android browsers but have come up with only one reference to the issue which was closed over a year ago with no solution: https://github.com/jquery/jquery-mobile/issues/382
Here is the label and input code:
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
<label for="phone">Confirm your Valid Cell Number:</label>
I will have to take a picture of the phone's display if anyone needs to see the issue because it does not happen on my emulator.
UPDATE: Removing the input identifier on the label (for="phone") solves the problem, but is not syntactically correct. Seems to be a weird bug, or "feature" on HTC browsers.
I ran into another big problem with the HTC browser. When you autofocus on an input the browser will apply its own style regardless of your css. It removes the border and background color and the input looks empty and almost invisible (if not for the blinking cursor). Using the :focus pseudo-class and other -webkit selectors don't work to override the browser's styles. There's another question on here describing this issue with no clear answers. Closest I can get to a workaround is removing the style from the input and wrapping it in a div.
I fixed this by adding line breaks before the text in my label like so:
<label for="phone">
Confirm your Valid Cell Number:</label>
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
The browser is actually rendering the text (including whitespace) from the label in the input. What a bizarre/stupid bug!
you can fix this by adding the following css
-webkit-user-modify: read-write-plaintext-only;
I am developing mobile apps using HTML5 & CSS3 using PhoneGap. My problem is that whenever I touch a textbox on my webpage running on the Samsung Galaxy Tab 10.1 (Android v3.1), it shows the keyboard but the page goes black for a fraction of second. At times, it flickers for a while showing black background and then restores itself.
I even tried with a simple page with a single input type="text" and it even happens with the same.
Anybody faced a similar issue and have had a fix for it?
Any help is much appreciated.
Thanks.
UPDATE 1:
As I said above, the black flickering even happens with the app containing a simple page with a single text box. Following is the code:
<!DOCTYPE html>
<html>
<head>
<title> Flickering Problem </title>
<style>
html, body{
-webkit-backface-visibility: hidden;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
}
</style>
</head>
<body>
<input type="text" width="200px" height="100px" />
</body>
</html>
I tested this on my Android tablet, and the flickering was as with a full fledged web page.
I tried adding certain CSS attributes suggested here on SO for similar problem which claimed to solve, but did actually help.
It is worth noting that the black flickering is happening whenever we try to enter any text in the textbox, and I am currently not doing any animation(s) / transitions using CSS3.
The solution is to enable hardware-acceleration in the android manifest.
<application android:hardwareAccelerated="true" ... />
This enables double-buffering through the GPU and resolves the problem.
Note that this option is only available in Android 3.0+.
Here's the background for all you techies: :)
We have recently been testing a functional jQuery Mobile HTML5 app wrapped with PhoneGap Android 2.x phones to the Galaxy tab 10.1.
We have seen something very similar, with the exception that we have defined a splash screen for our app.
What we see is that when an input field is given focus, the screen flashes up the splash screen momentarily. Very annoying! To verify if this is the same problem, define a splash screen for your PhoneGap app and see if the screen flahes your image instead of a black background.
Knowing something about what's going on with PhoneGap and the Android WebView, this is my best estimation of what is happening:
PhoneGap loads the main App activity with a black background and displays the splash screen (if defined) in that initial window.
PhoneGap then starts the WebView and opens it on top of the main Window.
When a field is selected, the Android invalidates the component wach time it updates it based on a focus event or keypress, or whatever, and Android redraws everything. So it redraws the main window behind the WebView and then redraws the WebView with the HTML page content on top of it. Since the device is not properly double-buffered, you see all of this redrawing in all its ugly glory right in front of your eyes.
We have seen serious glitches with Android web forms on some Android 2.x phones we have tested, and this looks like yet another glitch, but this time on the Galaxy Tab running Honeycomb (3.0).
We have attempted to use CSS -webkit-backface-visibility to resolve issues on some phones when experiencing flicker in the past - but this has caused serious rendering issues in HTML forms. Be warned! In theory this should be a viable fix to introduce some double-buffering into the mix, but in our experience it causes more problems than it solves.
This is either a problem with the Android OS or Phonegap.
If it's a problem with Android, this can only be fixed with a software update to the OS. You can test this out by going to a regular website with a text box and tapping on it to enter text. If it flickers, it's probably the OS.
If it's a problem with Phonegap, it might be fixed by doing a specific search for that. Looking at the top results in google, I've found this:
http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html
This suggests you put -webkit-backface-visibility: hidden; into your code. While I see you put it into the html, body tag, try putting it into the * tag, ex:
*{
-webkit-backface-visibility: hidden;
}
Note: The link puts the style onto a .x-panel tag, I'm not sure if that's specific to their code or to Android.
Here's another link that you should look into for a fix: http://code.google.com/p/jqtouch/issues/detail?id=301
I added a demo page:
http://jsbin.com/upixel/
From your code, the input is big (width and height need to be set by css) - if that is the case, the black color may come from the default tap color and the flickering may come from blocking (phonegap or script's fault)
see will this solve your flickering:
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Live Demo
Hope it can help
I have had the same problem and at the beginning I thought it had to do with the manifest part of the app.
After hours of troublesolving this is what worked for me. (Still haven't had the problem after an hour of testing on the phone. A samsung galaxy s2, version 4.0.3. And for the app I'm using verison 2.1).
html{background:url(img/brownBG.PNG) repeat 0 0;}
I just put a background on the html and now it works fine. If you try this solution, please comment if it works for you or not.
EDIT: I also have this css rule which is important for it to work
*{-webkit-backface-visibility: hidden;}
If anyone is still looking for a solution to this, I found the support ticket for this bug:
http://bugs.dojotoolkit.org/ticket/15365
As of today, the best workaround consists in using the adjustPan Android option plus the above subclass of ScrollableView? (if you can afford creating an APK dedicated for Android >= 3, you can also add the hardwareAccelerated option). This solves all troubles except the field duplication on Android 4. Of course, if the ScrollableView? is not really mandatory in the view containing text fields, replacing it by a View is even better.
In conjunction to the solutions mentioned already (i.e. -webkit-backface-visibility: hidden; and android:hardwareAccelerated="true"), I have also tried either one of the following:
(Applicable only on Android version >= 3)
AndroidManifest.xml
android:windowSoftInputMode="adjustPan"
MyActivity.java
this.runOnUiThread(new Runnable() {
public void run() {
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
}
});
I have a proven solution for this problem, I was also facing same problem but I solved it myself.
First create a field inside body and make it hidden or you can make it hide behind a div using z-index so that it won't be visible.
<script>
$(document).ready(function() {
document.getElementById('example').value='';
});
</script>
<body>
<div style='z-index:50;position:absolute;height:100%;width:100%;'>
Your page matter here</div>
<select id='example' style='z-index:10'>
<option value=''>a</option>
</select></pre>
</body>
The moto is that we have to set this select field when the page load, and doing this will stop the flickering for sure...try it guys.....it worked for me
I had a same problem on Samsung Galaxy Tab 10.1 like yours.While I upgraded android version from 3.1 to 4.0.3(using Cyanogenmod 9.0 nightly build 20120302) and without any code change, the problem was solved on my device.
So I guess that it's an issue of webview component on Galaxy Tab android version.
I can't say this will fix your problem, but it is worth a shot. Check your AndroidManifest.xml file for android:configChanges="orientation|keyboardHidden" in the activity tag (under application).