Develop Reference

Page refreshes on input form field Touch Events - Android, Samsung

Hey guys I am trying to trouble shoot an issue that seems to be only happening on certain Android devices that are version 5 or older.
What happens is, when I touch an input field say email-address or password to login, the page refreshes which makes it impossible to ever enter any information.
This is not just limited to those fields, but any form fields in the application. We have a leave feedback page and that form field also refreshes the page.
I had assumed I was having the same issue as Disabling android's chrome pull-down-to-refresh feature
But none of those solutions seem to be working for me and I just can't figure out what exactly is happening.
The information on my Android device:
Samsung Galaxy Tab A
Version 5.0.2
Is happening on Firefox, and Chrome on the device.
I am a little new to debugging on Android and could not find the version of touch my device is using.
We are using Jquery mobile for the front-end and some bootstrap javascript/css for forms.

So what I found out, was that whenever the screen resizes we do a refresh event for the new screen size.
What was happening on Android is that we had a css property `
orientation: landscape
on landscape mode. Well what was happening is you would click the form field on Android the keyboard fires and resizes the screen. Which was triggering a refresh, which took the keyboard away and sized the screen back to the regular screen with no keyboard event.
How we fixed this was using:
min-aspect-ratio: 13/9
This however was not happening on iOS because as far as I can tell, iOS just triggers a scroll-bar event instead of a screen resize event when the keyboard opens.

Frozen webview when clicking textbox in embedded web - Android 4.3

I try to run an embedded web in Android, but it crashes when using Android 4.3 (Nexus 4). I run the app and the first webview appears correctly, but when I touch the textbox and the keyboard appears, the view gets frozen just on the top part of the keyboard (where the text predictor is located in case it's active).
This problem only appeared when using 4.3, not with the previous versions.
I've been trying to fix the bug as it says in this issue, but the solutions they give don't resolve my case: https://code.google.com/p/android/issues/detail?id=42518&q=webview&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
I would love if somebody have been through this problem, because we don't know what to do to fix it...

After more than one year without trying the app, it is working now. The device now is running Android Lollipop, so I guess that probably the WebView has some improvement that avoids the bug.

Android/Cordova WebView native HTML select causes weird DOM behaviour

I am working on an Android/Cordova app with an embedded map view using leaflet.js. The device I am using is an Nexus 7. The map is loaded using a TileLayer and all is good until... I click on a form select control in a form and the native Android picker appears. From there on the map tiles are all shifted a few pixels in both x and y direction. When I run the web app in the Chrome browser on the same device there is no issue. Seems isolated to with the Cordova DroidGap or Android WebView. Looks like something weird is going on in either the DOM or WebView container which throws the tile images off. Tried inspecting the map container size before and after the select was clicked but there is no diference. Tried logging the DOM and same in both case its identical.
Anyone have any other suggestions where to look?
Is there any way to disable this native select picker?

WOOOOHOOO! Found it... or a solution that is. Still not too sure what the root of the issue is. To fix the problem you need to set leaflet's global L_DISABLE_3D switch to true.
I can replicated the issue in a stripped down version of my app which only had bootstrap, leaflet and cordova as dependencies. The app has a navbar with a dropdown nav item in the first row and a leaflet map in the second row. The issue only happens when its hosted in a cordova app i.e. webview.
Note: I cannot replicate the issue in either on a mobile or desktop browser.
To reproduce the issue you need to 1). click on the navbar dropdown (Account) to make the menu appear 2).then touch the map. The result will be an illusion that the tile grow in size and therefore distorting the map i.e. roads do not line up anymore and labels get cut-off. I have logged the image size before and after the trigger and got the same size. This leads me to believe hat the issue relates to pixel density or some other graphical phenomenon that I don't understand.
Still at this point it s unclear if the issue relates to leaflet, cordova, or the Android native WebView.
UPDATE: see comments below for a better solution.

trigger.io Android webview app - grey background appearing after keyboard closes or orientation change

I'm building an html5 wrapped iOS / Android app with Trigger.io.
I have a problem on Android with a grey background appearing on the screen in some occasions after the virtual keyboard has closed, or after the phone has changed orientation.
Example screenshots are shown below.
The grey background is after the end of my app's page. Sometimes it is visible for a split second, other times it stays visible until you make an action such as scroll the page, bring the keyboard back, change orientation.
It's pretty jarring to look at.
I'd ideally like to stop the issue occurring, but as a temporary fix I'd be happy with being able to set the grey to my own background colour to make it less noticeable.

This looks like the HTML's not being re-drawn when the keyboard disappears... does it clear up if you do something to trigger a render?
Are you using a framework to handle the UI here? Something that might be trying to do something clever based on the visible viewport?
From what I can tell, the root of the issue is in the webview not re-drawing correctly, or something in your JavaScript failing to respond to the viewport changing size.
You could try running the app on the "web" target (instead of Android) then opening it in your phone's browser: if you can get far enough into the app to create the same effect it would help isolate the problem to the webview rendering or your JS.

I had a very similar issue in my project, in my case on Android 2.3.5 but not on Android 4.*. The cause in my case was not setting a window soft input mode for the associated activity in the manifest:
android:windowSoftInputMode="adjustPan"
Instead, the window was resizing when the keyboard appeared but apparently not resizing once more when the keyboard disappeared.
More details can be found here.

I almost went crazy with the same issue. I finally found out that this largely depends on the device you are using. I had a similar problem : Fixed elements (HTML) break after android keyboard dissapears?
And I am also using trigger.io. This doesn't happen with some devices. Could be the particular OS in android or could just be the way the specific device handles the memory latency.
I have looked for this but I go with #jamesbrady in that the HTML doesn't redraw. The problem in trigger is that you cannot edit the
android:windowSoftInputMode="adjustPan"
because the activity tag in the AndroidManifest.xml updates on each run. You would need to build a private module for that.

Trigger.io and KendoUI Mobile - Layout / view doesn show up until touch

I am trying to work with trigger.io and Kendoui Mobile.
the point is, when launching the mobile app on emulator all works like expected - but when it runs on android mobile the Layout / View doesnt show up until you touch the screen or turn the mobile to landscape or viceversa.
with a tabstrip of kendoui one time showed up you can swtich between views with no problems.
but if you redirect to another view with different layout you have to touch again the screen to show the content (it just shows just the background of body until touch).
the telerik guys at the moment dont know from where it comes from as they tested it with phonegap and no problems.
Maybe the trigger.io guys can find out why it happens?
Best regards
marc

It looks like this is an issue with hardware acceleration on Android 4.0, probably an unfortunate interaction between whatever hardware accelerated transitions Kendo UI use and that particular version of Android.
Phonegap seem to have hardware acceleration disabled by default, which is why they would not be affected.
As a fix we are going to add an option to disable hardware acceleration on that particular Android version, which we'll have live by the end of the week.