I have a basic textarea looking like this:
<textarea class="text-input__input"
name="message"
placeholder="{{'incidents.input_placeholder' | translate}}"
rows="1"
minHeight="21"
required
#textInput
[(ngModel)]="message">
</textarea>
used for a website. When typing in this textarea on an Android device using Chrome on landscape mode the cursor is reset at the start of the input at every character typed. Thus if we type "hello" this comes out as "olleh". This behavior is observed only on Android devices and only on Google Chrome, it works fine on Firefox. The textarea behaves normally on emulator and on iOs devices.
I tried to switch off autocorect but it didn't help.
Any idea where this might come from ?
I found the solution, it appears that the textarea has a really weird behavior when it's container reaches a height of 0px. I'm not quite sure where this might come from but adding min-height: 1px to the container of my textarea fixed the issue.
I am completely at a loss here, and because I don't have an Android device, it's been very hard to figure out what's going on, and can't duplicate it in the simulator. For reasons unknown, Chrome on Android is having issues focusing form fields, and users are starting to complain. Everything works fine on other platforms - including Chrome on Windows/Mac/iOS.
The site having the problems is no longer broken, as the problem was resolved.
Any guidance would be hugely appreciated.
I did some testing locally and confirmed that my comment is correct. If you set the vimeo iframe to display: none; that will allow the form elements to be tapped on android / chrome. So you'll need to make three changes:
css update: set vimeo iframe to display: none
javascript update - where you normally set vimeo's iframe to visibility:visible, you'll also have to set display:block
javascript update - similar to above, where you set vimeo's iframe to visibility:hidden, you'll also have to set display: none
I believe that will solve the problem and have no negative side effects.
Vimeo iframe is taking the focus, hence the input fields are not clickable.
Set the width and padding-top to the modal containing Vimeo iframe only when the modal is selected.
Change following css selector :
.modal .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
to
.modal .modal-state:checked+.modal-window .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
That website is very laggy on my device, perhaps you should reconsider the design. Or make it simpler for tablets/phones.
Nevertheless I found that text fields that follow (including) "What are your three favourite movies?" can be focused properly, and it seems there's some view on top of the first text fields in this form.
Perhaps that can lead you in the right direction. Good luck!
I created a website, which I intend to display in some mobile devices. The thing is that I have created several menu options as circles.
To achieve this effect I use border-radius in a style sheet, and -webkit-border-radius and-moz-border-radius too.
On the computer it looks well in the browsers I have (firefox and chrome), but when I move to the android browser, these circles are reset to be square divs. This occurs since the load of the page.
may I use other special style for android? Could I need something like the jQuery mobile?
In short I will put the code, but if anyone has gone something like, could share that information, please? thanks
See this post for the answer: Galaxy S4 stock browser CSS3 border-radius support?
Just use the expanded border-left-radius, border-right-radius, etc as a workaround; it's a glitch in the new Android 4+ browser; a bug report has been submitted.
Hi I am using this for gradient. And this works fine in most of the browsers.
`background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
-webkit-border-radius:11px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.8);
/* For WebKit (Safari, Google Chrome etc) */
/* For Mozilla/Gecko (Firefox etc) */
/* For Internet Explorer 5.5 - 7 */
/*-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B4DCFA, endColorstr=#FF0000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
`
Can you please post the code?
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 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).