My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 24746: ICS browser loses some input CSS styling on focus
31 people starred this issue and may be notified of changes. Back to list
Status:  New
Owner:  ----


Sign in to add a comment
 
Reported by j...@decide.com, Jan 25, 2012
Our website and PhoneGap app have a search input box styled with rounded corners and a background image. In ICS we lose this styling on focus.

In the attached screenshots I'm running the emulator with Android 4.0.3 - API Level 15. no-focus.png shows the correct un-focused state. focus.png shows the incorrect focused state with the background image and border-radius attributes ignored. It does seem to preserve the padding-left attribute though.

This can be reproduced by saving the attached input-focus.html and spyglass.png to disk, and opening input-focus.html in the ICS browser. On Gingerbread or any desktop browser (for example, Chrome 16.0.912.75) the rounded corners and background image are preserved on focus, so this seems to be a regression.
no-focus.png
13.0 KB   View   Download
focus.png
12.1 KB   View   Download
input-focus.html
270 bytes   View   Download
spyglass.png
1.4 KB   View   Download
adb-bugreport.gz
182 KB   Download
Mar 2, 2012
#1 mr.happ...@gmail.com
This problem also effects text input controls and textareas in PhoneGap 1.4.1 apps on Android 4.0.3.

In PhoneGap 1.4.1 apps on Android 3.2.1 textareas did not have this problem.
Mar 8, 2012
#2 jeffreyf...@gmail.com
Am experiencing same issue. We need the background of the input to be transparent such that we can display a 'hint' label underneath it. And there's a blue outline we cannot suppress on Android 4.0.3 API 15 emulator. Screen cap attached. This is not an issue with Android 2.x.

Related Stackoverflow here: http://stackoverflow.com/questions/9005550/input-elements-on-android-4-x-can-not-be-styled-when-focused
Android.4.0.3.InputIgnoresCSS.jpg
34.1 KB   View   Download
Mar 12, 2012
#3 bun...@gmail.com
I just can't get how this obvious bug may pass in a production release. Additionally if you transform the parent, you get two inputs instead of one, reproducible as easily as this:

<!DOCTYPE html>
<html>
<head><title></title></head>
<body style="-webkit-transform: translate(0,50px);">
    <input type="text" value="Text" />
</body>
</html>

At least in 2.x and 3.x inputs didn't get broken when you do this. How can we support this platform if it doesn't support us, the developers?
Mar 12, 2012
#4 walterst...@gmail.com
Tested on non native browsers like Firefox or Chrome for Android and no bug.
Also when you put the focus on a field that is at the bottom of the page, the keyboard opens, then the input goes at the top, letting some space for the keyboard, but instead of behaving nicely, there seems to be a second input. You end up with two inputs : the "real html one", and a second with white rectangle. Strange.
Mar 12, 2012
#5 j...@decide.com
It's possible they're related, but I filed  issue 24780  for the two inputs problem.
Mar 12, 2012
#6 bun...@gmail.com
They are related - the issue is the fake input that gets rendered on top of the original one - it can't be styled and it is not part of the flow, so it doesn't move when you translate the parent. For instance if you set

input:focus {
    position: absolute;
    left: -10px;
}

You will see the fake input rendering first, then the original one moving to the left.
Jun 22, 2012
#7 smitty.s...@gmail.com
I've had the same issue using the KendoUI controls (http://www.kendoui.com) + PhoneGap in a WebView control. The kendo team provided a CSS fix that made things work but I still think its an issue with the android browser.

I had the issue on my Moto Droid X running 2.3.4 and ASUS Transformer Prime running ICS.
Jun 28, 2012
#8 YuviPa...@gmail.com
Applying -webkit-user-modify: read-write-plaintext-only; to the affected styles fixed it for me. Workaround :)

(Nexus S)
Jun 29, 2012
#9 bun...@gmail.com
I already worked around it in 4.x by other means (transforms), but thanks - your property is much cleaner. However in 2.x neither this property is supported and my workaround breaks some keyboard features (like Cyrillic input). In 3.x Swype doesn't work with both this property and the workaround (Cyrillic works)... 

The fun just doesn't end.
Jun 29, 2012
#10 walterst...@gmail.com
The -webkit-user-modify: read-write-plaintext-only; fix seems to work for Galaxy Nexus and HTC sense, if you've got other phone you can test here and let us know maybe http://inpixelitrust.fr/demos/android_focus_bug/

Thanks guys !
Jun 29, 2012
#11 moh...@gmail.com
It does work indeed, partially. I've tested it on Galaxy S2 (i9100), but there's still an issue with number and tel fields and while the fix causes the fields being rendered correctly, no numeric keyboard is being triggered anymore. The qwerty keyboard is displayed instead.
Jun 30, 2012
#12 mail@maxwerner.de
Fix works on Galaxy S3 (GT-i9300) with the following browsers:

* stock browser 4.0.4
* Dolphin Browser Mini 2.3

In Firefox 14.0 the bug doesn't appear.
Jul 3, 2012
#13 benstra...@imtt.com
"-webkit-user-modify: read-write-plaintext-only" works to restore styling, but unfortunately, when applied, tabbing between inputs no longer works.
Oct 9, 2012
#14 wturnerh...@gmail.com
"-webkit-user-modify: read-write-plaintext-only" only partially works. Breaks swype by only entering the first letter of the swyped words.

Let's get this one resolved. Android forms are HIDEOUS.
Oct 9, 2012
#15 bun...@gmail.com
I think the issue is already resolved in Jelly Bean's default browser (not Chrome), dunno why this is not mentioned here. There's no need for the CSS property in it.

However the older versions are not likely to get fixed :(
Oct 9, 2012
#16 wturnerh...@gmail.com
Only JB will get a fix?!? That's unfortunate given that JB's saturation is below 1 percent!!! Unfortunate but good to know it is fixed for NEW JB phones.
Nov 16, 2012
#18 meliketo...@gmail.com
Above fix will not work if there is a fixed element on the page and the input field is inside a container with "position:absolute".
Dec 27, 2012
#19 yasmeen....@gmail.com
 myWebView.setOnHierarchyChangeListener(new OnHierarchyChangeListener() {
				
			@Override
			public void onChildViewRemoved(View parent, View child) {
			
			}
			
			@Override
			public void onChildViewAdded(View parent, View child) {
				// TODO Auto-generated method stub
				
				if( child.getClass().getName().equals("android.webkit.WebTextView")){
				
					myWebTextView =(AutoCompleteTextView) child;
					
						myWebTextView.getHandler().post(new Runnable() {
							
							@Override
							public void run() {
								
								myWebTextView.setBackgroundColor(Color.TRANSPARENT);
								myWebTextView.setCursorVisible(false);
								myWebTextView.setTextColor(Color.TRANSPARENT);
								
								//set lines to 0 because sethighlightcolor does not work
								myWebTextView.setLines(0);
								
								myWebTextView.setInputType(InputType.TYPE_NULL);
								myWebTextView.setFocusable(true);
								myWebTextView.setFocusableInTouchMode(true);
								
								if(myWebTextView.hasFocus())
									myWebTextView.clearFocus();
								
								
								//sometimes the keyboard doesn't show up by just requestFocus,so i have to force it by showSoftInput
								InputMethodManager mgr = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
								myWebTextView.requestFocus();
								mgr.showSoftInput(myWebTextView, InputMethodManager.SHOW_FORCED);
							}
						});
				
				}
				
			}
		});
Mar 13, 2013
#20 emus...@google.com
Did anyone find a solution to keep input background as transparent on focus??? 
Mar 18, 2013
#21 n.r...@dvf.com
input:focus will also override your input styling if -webkit-backface-visibility is set to hidden on the form or on the page in < android 3.0. It will also cause the page to erratically scroll to the bottom on focus of the input. -webkit-backface-visibility:hidden is used on css 3d transforms, and to remove flickering on regular transforms but it is not supported on < droid 3.0. if this is the issue, you can remove that declaration altogether or specifically target the versions of droid that do not support it and set those elements to -webkit-backface-visibility: visible. this will resolve the focus styling issue and the scroll to bottom of the page.
Jan 7, 2014
#22 Ningzb...@gmail.com

there's a solution:

input {
position:relative;
top:-500px;
-webkit-transform:translate(0,500px);
}

no need "-webkit-user-modify: read-write-plaintext-only" 
Jan 7, 2014
#23 bun...@gmail.com
We were using the transform hack for almost an year but decided to avoid it in the future as it causes some weird issues (mostly in Android 2.x), like inability to use non-english characters or 3rd party keyboards as Swype, crashing PhoneGap when you press a specific letter and the inability to type number 9 in most HTC devices... Seems that some keyboard features are working only if the native input is visible on the screen. 

Not sure about the effects in Android 4.x as we use read-write-plaintext-only exclusively there to avoid most issues (and the issue is fixed in 4.2 - Jelly Bean, no need for the property or the hack).
Sign in to add a comment

Powered by Google Project Hosting