Flickering / stretching on keyboard toggle

[longsleep]

Whenever the keyboard is shown or hidden, the visible view part of the app does get stretched for a short time, resulting in a ugly user experience. Is there any way to prevent this?

The app is using a simple Polymer . Whenever one clicks on it, the keyboard appears and the whole view port of the app gets streched for a short time until the keyboard is finished sliding in. When the keyboard is sliding out again, it gets streched again, the oposite direction.

For some reason, this only happens when running the app with cca run android --device. Running it inside the "App Dev Tool" with cca push does not flicker.

[longsleep]

I also have an example app, which does show this behavior: https://github.com/longsleep/polymer-mobile-cca-example

Run this app with cca run android --device and it flickers as soon as the keyboard is shown (click the + icon to show a input field).

[longsleep]

I did some digging and found that changing windowSoftInputMode from adjustResize to adjustPan in platforms/android/AndroidManifest.xml resolves the flickering. Not sure why and if the adjustResize is the default.

As this setting has issues with some web apps i think the default should either be changed to adjustResize or the value should be added to manifest.mobile.json

[FreakTheMighty]

I've also seen this issue. It seems unique to crosswalk. Crosswalk appear to have a number of issues related to presenting a clean layout. Between this issue and flickering on start up and backgrounding its very challenging to get a polished looking application.

[FreakTheMighty]

@longsleep adjustPan worked for me as well, thanks for the tip. Were you able to add this to the config.xml or are you modifying the AndroidManifest.xml directly?

Also, is anyone able to comment on why the default is adjustResize?

[agrieve]

There's a somewhat confusing discussion here: https://issues.apache.org/jira/browse/CB-4404

I don't think there's a <preference> for it in cordova, but perhaps there should be.

[FreakTheMighty]

@agrieve I tried android:windowSoftInputMode="adjustPan", but I'm pretty sure that didn't work. I'll need read over the ticket more.

On the subject of adjustResize, the flicker we're seeing seems like a bug in crosswalk, its not present when using the system webview.

I've done a screen capture of the flickering:

https://drive.google.com/file/d/0B0EqPYsVdSGFZ1JwcWdmOURsamM/view?usp=sharing

[GustavoCostaW]

@longsleep @FreakTheMighty Thx for the solution, I have the some problem, but, how change windowSoftInputMode dynamically?

[sebasi]

@GustavoCostaW you can just create a hook. Create a directory called "after_prepare" in your project/hooks directory. In there, create a file with the following contents:

#!/bin/bash

if [ -f "platforms/android/AndroidManifest.xml" ]; then
    echo "Changing 'windowSoftInputMode' from 'adjustResize' to 'adjustPan' in AndroidManifest.xml to prevent flickering"
    sed -i 's/android:windowSoftInputMode="adjustResize"/android:windowSoftInputMode="adjustPan"/' platforms/android/AndroidManifest.xml
fi

[GustavoCostaW]

thx @sebasi

[imskull]

Beware! Using adjustPan will cause app freeze on android 4.1 when soft keyboard appears, here is relative issue: https://crosswalk-project.org/jira/si/jira.issueviews:issue-html/XWALK-3652/XWALK-3652.html . I confirmed it on my MI2 Android 4.1, but on my Nexus9 5.1, it works fine.

[GustavoCostaW]

@agrieve @Imskull @sebasi @longsleep @FreakTheMighty I fix the issue setting:

XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, false);

in XWalkCordovaView.java in the plugin.

Setting AdjustPan It is bad for the user experience, because there is no scroll.

[imskull]

@GustavoCostaW That works AMAZING~~~~! I just wanted to publish my app with this big/annoying/stupid issue today, you save me! thank you.

[agrieve]

Pull request to fix this upstream: https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview/pull/37

[GustavoCostaW]

@agrieve why ANIMATABLE_XWALK_VIEW it is not false default?

[trazek]

I am trying to apply this pacth in my ionic app and have the following in my XWalkCordovaView.java:

boolean prefAnimatable = preferences == null ? false : preferences.getBoolean("CrosswalkAnimatable", false); boolean manifestAnimatable = ai.metaData == null ? false : ai.metaData.getBoolean("CrosswalkAnimatable"); if (prefAnimatable || manifestAnimatable) { // Slows it down a bit, but allows for it to be animated by Android View properties. XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, false); }

However when I build the app, the flickering still happens. Am I missing a step? I essentially made the file change and rebuild. Any help is appreciated!

https://crosswalk-project.org/jira/browse/XWALK-3547

EDIT:

This fixed my issue: https://github.com/driftyco/ionic-cli/issues/521