trigger.io Android webview app - grey background a

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.