I am working on a responsive website, which has a different stylesheet for either mobile or desktop. Everything looks nice and works great, until text inputs are interacted with on mobile. They show up as they should. But once clicked (ehrm.. touched), I found that the browser in Android starts scrolling like crazy, and the same happens when typing. The text is entered in the input, though, and the soft keyboard/focus on the input is not lost.
My project can be found over here: http://www.gortzfruit.nl/new/
The problem is that I have been searching for a solution for a while now, and found similar issues of which the solutions were not working out for me. Some topics -and solutions- I have been looking into were:
https://github.com/scottjehl/Device-Bugs/issues/3
-Here it is suggested that the problem lies within positioned elements. Especially absolute within fixed positioned elements. This is recurring in my design, but once removed it did not solve the problem.
Android Browser textarea scrolls all over the place, is unusable
-This one suggests that the problem is with the css-properties -webkit-transform: translate3d(0, 0, 0); and -webkit-backface-visibility: hidden;. I did not include these by myself, but I thought a Google Maps API I included might use these. I found that they don't use it either, after analyzing the markup Google Maps API produces.
How can I prevent wild scrolling when a fixed position text input form field gains focus? -This one is focused on trying to cope with the problem. Setting the body to overflow:hidden; was suggested to block scrolling while being focused, but it did not work for me.
disable scrolling on input focus in javascript
-Here it is suggested that returning false on keydown might solve the problem, which I tried with no success. This one block my text from being actually entered in the input.
I know this is related to the bug in Android which causes this weird scrolling. But I don't know anymore how to cope with this. For me it does not matter whether I find out how to avoid the bug or whether I find a hack to make the bug unnoticable. I just want to get rid of the weird scrolling behavior while typing and focussing/blurring on textboxes.
Thanks in advance,
Jeroen
Remove the meta viewport tag from your markup and add this immediately after the opening body tag:
<script type="text/javascript">
<!--
(function() {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
var content = 'initial-scale=';
content += 1 / window.devicePixelRatio;
content += ',user-scalable=no';
meta.setAttribute('content', content);
document.getElementsByTagName('head')[0].appendChild(meta);
})();
//-->
</script>
This will give you the best experience on mobile (amazing image rendering too!). I noticed on my device (which isn't Android) I had some weird scrolling/zooming issues and this eliminates that. Let me know if it works :)
Related
I am using the input event on a textarea to apply some logic that mutates the value of the textarea. This works as expected in local dev environment in a browser.
However, my target platform is android. On this platform, I'm noticing that instead of event.inputType being insertText, sometimes it is insertCompositionText. Android is apparently trying to be efficient by not actually mutating the textarea's value until you press space. How can I disable this behavior?
I found someone in a similar situation here who tried to use blur and focus events quickly. I can't use this because (1) it's hacky, hope there is a better solution (2) it resets the cursor position and degrades the user experience.
For reference, using ionic vue, but this is just an html <textarea>:
<textarea v-model="input" #input="onInput" />
onInput(event) {
console.log("onInput", event);
//more logic
}
You can't. That behavior comes from the keyboard, which is a separate app on Android. Not implementing the composing text functionality correctly will likely screw it up, breaking autocomplete, tap to correct, and the delete key, which all behave much differently due to composing text. It might even break normal typing- the idea of composing text is that it's temporary until you make it permanent. If so, when it does autocorrect on space it would assume the old stuff is deleted and recommit the entire word, causing duplication.
I was able to handle this issue by adding a hidden password input and route all the focus, events and value of my text input to the password input
The browsers will not show any predictive for password inputs and no insertCompositionText anymore
<Text>
Aufmerksamkeits{'\u00AD'}defizit
</Text>
This leads iOS to
Aufmerksamkeits-
defizit
But on Android to
Aufmerksamkeitsd
efizit
So it seems that Android ignores the given soft hyphen. How can I make this work on Android as well?
I now it is a bit late, but I spent more time on this than I am proud of. If you want to use soft hyphen use \u00AD in strings, e.g.:
<string name="einzelfahrt_name">Einzelfahrrad\u00ADkarte</string>
In order to make this working though, in your TextView, you have to add:
android:hyphenationFrequency="full"
I have the same problem and it seems that Android ignores soft hyphens.
The only workaround I could think of is, only on Android, to replace the \u00AD with \u200B. It's known as zero-width-space, and it would properly break the words where expected, although it would not show any hyphenation character. You would end up with:
Aufmerksamkeits
defizit
Not the perfect solution, but at least it will not break words at random positions.
If I use position:fixed for a header, it stays fixed however on android there is a bug where if you have any fixed position divs present when you focus an input element, the page does crazy scrolling jumping about all over the place when you type.
so, I thought the solution was something like iscroll, so i can keep everything to position: absolute instead.
However, even the new iscroll5 doesnt allow android to use any SELECT inputs within an iscroll, it just doesnt focus them. On top of this, any input elements get the input overlay appearing but not over the top of the input, another bug of android..
Is there any way to get fixed header/ other elements that works on android? is there a different script to iscroll which can use form elements without hassle?
in IScroll 5 you can add the parameter preventDefaultException for enabling click of any input and for this example any element having the class .placeholder, .label. Example :
this.scroll = new IScroll('#wrapper',
{
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|LABEL|SPAN)$/,
className:/^(placeholder|label)$/
}
});
I'm a bit tired looking for a solution for overlapping input field by soft keyboard on Android. My problem is very similiar to this one: Soft Keyboard Overlapping with EditText Field although in this case it occurs in HTML5, not native application.
More precisely: when the input field is fully covered by keyboard, a whole page is scrolled and this field become visible - that's OK. But if this input was on the edge of visible area (after keyboard appears), my soft keyboard overlaps it and page won't scroll at all. The page will be scrolled just after typing a first sign.
My customer doesn't like this behaviour... It occurs for sure on Galaxy Tab 10" - Android 4.0.3, Lenovo Tablet - Android 3.1.
I have tried setting input's height, using box-sizing:border-box;, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; and few more, but nothing worked.
Have you got any idea? I would prefer CSS solutions, javascript page scrolling is not an answer for me in this case (customer requirements).
Maybe it's just an Android Web Browser bug with no workarounds or some specific problem due to some of input's parents' style (I've already tried removing all position: absolute properties)?
All suggestions are welcome.
I had this annoying issue, related to my css framework - mobile-angular-ui.
So it's known bug on internet, and I spent hours on searching for fix on web,but unfortunately none of proposed solutions solved my particular case.
At last I did some testing, and it turned out that this behaviour is caused by framework I used.
(I did report it to mobile-angular-ui authors, but I didn't get response.)
You probably want to do few tests, as I did, to find out if this issue is related to architecture of your app, really. Comment out all the css code and start from blank, pure html page with forms on it.
If all's fine (form should scroll up to show in visible part of view, above of soft keyboard) when your css is commented out/switched off, your issue lies in css, just like in my case.
For those who use mobile-angular-ui in their apps, and get into this issue, this piece of code did the job for me:
html {
overflow: auto;
}
body {
height:auto;
overflow: auto;
}
.scrollable {
position:inherit;
}
The rest depends on your particular case.
I hope this helps.
The simplest way to solve this android nasty (and now in ios7 too) is to use the inputs focus and blur events. If you are not using the footer tag just replace it with the class of your footer element.
In jQuery:
$("input").focus(function(){
$('footer').hide();
});
$("input").blur(function(){
$('footer').show();
});
I have a problem as regards the combination of jQuery mobile, phonegap and android regarding the toolbars. To be more precise I would like both my header and footer to remain stable (data-position="fixed") after my input on a text area.
I also include the attribute data-tap-toggle="false" on both header and footer, but after I write something on the text area and return on the page the footer and the header are not "fixed" anymore, and I have to touch the screen again in order to be visible and fixed again.
Any advice?
Thank you in advance.
The best solution (works for me perfectly) is:
https://github.com/watusi/jquery-mobile-iscrollview
It is a combination of jquery mobile with iscroll.
Basically, it does all the nasty work joining the 2 mentioned libraries.
I have the exact same problem on iOS. After several hours, and trying several different things, I went for iScroll. If there was any answer other than this, I would happy to hear.
I had the same issue on Android 4.0.3 . I had a list with a search box. As soon as I tap the search box for input, the header and footer lost their fixed position. I got a very simple fix work for me.
$('input[data-type=search]').live("focus", function() {
$("[data-role=header]").css('position','fixed');
$("[data-role=footer]").css('position','fixed');
});
Hope it works !