Solved: Crosswalk - Tabs Module Not Displaying Modal Correctly


#1

Well, I guess I’m the first one to post here :slight_smile: .

Great to have a support channel other than Stack Overflow or email.

Problem description:
When using Crosswalk, if you open an external URL with forge.tabs.open() the modal opens with the top bar shown correctly (with ‘Close’) but the main content is still your own existing view rather than the external page. The problem does not occur with Android build instead of Crosswalk.

Environment:
Android 6.0 Lollipop
HTC One M9
Platform 2.4.4
Tabs module 2.0

Steps to Reproduce:

  • Create content for a basic page
  • Create a button which executes forge.tabs.open() to open an external URL
  • Run or Serve Crosswalk
  • Note incorrectly displayed modal.

#2

Congratulations and thank you for breaking the ice @rafiq! :smiley:


The background to this behaviour is that there is a bug with Crosswalk WebView versions 16 and higher that causes the app display to flicker when opening the on-screen keyboard.

One workaround for this issue is to force the Crosswalk rendering engine to use SurfaceView instead of TextureView.

We’ve made this the default setting in the platform but it does, unfortunately, come at the cost of breaking modules that need to launch additional Crosswalk windows. For example, forge.tabs

Therefore, if you are using the forge.tabs module with a crosswalk build you will need to set the value of the “Enable Animatable Xwalk View” property to true in your src/config.json file:

"crosswalk": {
	"enable_animatable_xwalk_view": true
}

If you are now experiencing flickering when opening the on-screen keyboard you can use the second workaround for this issue which is to set the “Window Soft Input Mode” property to "adjustPan" in your src/config.json file:

"android" {
	"windowSoftInputMode": "adjustPan"
}

This workaround will resolve the flickering, albeit at the cost of the WebView no longer scrolling up when the on-screen keyboard is opened.

The workaround for this depends on your web framework of choice, but a good place to start would be StackOverflow.

tl;dr If you want to use forge.tabs with the crosswalk target you need to:

  1. Set crosswalk.enable_animatable_xwalk_view to true.
  2. Set android.windowSoftInputMode to "adjustPan".
  3. Manually handle keyboard show/hide events to ensure your form inputs aren’t obscured.

It’s not ideal and it looks like it may be a while still before the Crosswalk team can resolve the underlying problems.

For more background information see: XWALK-3547 -
XWalkView window stretches momentarily when hiding native ui elements
.