Opened 2 years ago

Closed 7 months ago

#15365 closed defect (wontfix)

dojox.mobile.ScrollableView with Cordova on Android: flickering and input field duplication when scrolling while the virtual keyboard is shown

Reported by: Adrian Owned by: pruzand
Priority: undecided Milestone: 1.9.2
Component: DojoX Mobile Version:
Keywords: Cc: cjolif
Blocked by: Blocking:

Description

This ticket is about the misbehavior when scrolling a dojox.mobile.ScrollableView while the virtual keyboard is shown on some Android devices in a PhoneGap (Cordova 1.6.1) container:

  1. Flickering: a more or less severe flickering occurs on some Android versions (not all; see details below).
  2. Text field "duplication": while scrolling, the edited textfield "duplicates" itself, that is a second textfield overlays the initial one and the two don't stay one on top of the other while scrolling (this also varies depending on the Android version, details below).

Both issues only hurt when scrolling while the virtual keyboard is shown (after touching a text input field such as a dojox.mobile.TextBox).

============================
How to reproduce:

  1. Import the attached testScroll-Android18-Cordova-1.6.1.zip into an Eclipse with ADT 18 plugins. This is an Android project containing a hybrid app built using Cordova 1.6.1 and dojo pre-1.8. It is compatible with any Android version >= 2.2.
  2. Using ADT, build and deploy the APK on Android devices (various versions as detailed below).
  3. Launch the app. The home page of the app provides links to several versions of the test: a) (For comparison) dojox.mobile's TextBox, TextArea, and ExpandingTextArea inside dojox.mobile.View

=> This works fine in all Android versions.

b) dojox.mobile's TextBox, TextArea, and ExpandingTextArea inside dojox.mobile.ScrollableView

with subvariants:

b.1 using the default value (0) of ScrollableView.scrollType
b.2 using scrollType=1
b.3 using scrollType=2
b.4 using the default scrollType but with the hiding of the address bar disabled

=> This exhibits troubles as detailed below.

c) (For comparison) A pure HTML form containing text input fields (no Dojo code)

=> On Android 3.1 (Samsung Galaxy Tab 10.1) this also exhibits a flickering trouble in the Cordova container. Note that there's no flickering when running it directly in the browser (to test it, just lunch assets/www/test_TextInputPureHtml.html as a webapp).

============================
The behavior various quite a lot depending on the device:

  1. Android 3.1, Samsung Galaxy Tab 10.1
    • dojox.mobile.View: strangely, no scrolling when keyboard visible. On other Android versions, scrolling does happen in this case, at the level of the page (not because of our widget).
    • dojox.mobile.ScrollableView:

scrollType=0: flickering + textfield duplication.
scrollType=1: flickering + textfield duplication.
scrollType=2: no flickering, no duplication.

  • pure HTML form (no Dojo) inside Cordova: severe flickering, but no duplication. (Note there's no flickering when running it in the browser without Cordova.)
  1. Android 2.2, Samsung Galaxy Tab
    • dojox.mobile.View: scrolling does happen when keyboard is shown, at the level of the page (not because of our widget); but no flickering, no duplication.
    • dojox.mobile.ScrollableView:

scrollType=0, 1, and 2: no flickering, no duplication.

  • pure HTML form (no Dojo) inside Cordova: no flickering, no duplication.
  1. Android 2.3.4, HTC Sensation (phone)
    • dojox.mobile.View: scrolling does happen when keyboard is shown, at the level of the page (not because of our widget); but no flickering, no duplication. (Note that there is no scrolling when running as webapp).
    • dojox.mobile.ScrollableView:

scrollType=0: no flickering, no duplication.
scrollType=1: no flickering, but textfield duplication (and the page autoscrolls strangely when the keyboard shows up).
scrollType=2: no flickering, no duplication.

  • pure HTML form (no Dojo) inside Cordova: no flickering, no duplication.
  1. Android 4.0.4, Samsung Galaxy Nexus (phone)
    • dojox.mobile.View: scrolling does happen when keyboard is shown, at the level of the page (not because of our widget); but no flickering, no duplication.
    • dojox.mobile.ScrollableView:

scrollType=0: no flickering, but textfield duplication.
scrollType=1: no flickering, but textfield duplication.
scrollType=2: no flickering, but textfield duplication.

  • pure HTML form (no Dojo) inside Cordova: no flickering, no duplication.
  1. Android 4.0.1, Asus Eee Pad Tran (tab) Unavailable when I did the last testing campaign, but for the textfield duplication it was previously tested with a similar behavior as the Android 4.0.4 Galaxy Nexus (see above).
  1. Android 2.2, HTC Desire(phone)
    • dojox.mobile.View: scrolling does happen when keyboard is shown, at the level of the page (not because of our widget); but no flickering, no duplication.
    • dojox.mobile.ScrollableView:

scrollType=0: no flickering, no duplication.
scrollType=1: no flickering, but textfield duplication (and the page autoscrolls strangely when the keyboard shows up).
scrollType=2: no flickering, no duplication.

  • pure HTML form (no Dojo) inside Cordova: no flickering, no duplication.

============================
Remarks:

  • At a quick testing on some of the devices, the update of Cordova from 1.6.1 to 1.7 does not change the behavior.
  • The flickering issue for the Cordova app only concerns Android 3.1, Samsung Galaxy Tab 10.1. On the same device, the flickering also occurs with a pure HTML form. Also, for the Cordova+dojo app, the flickering goes away if the hardwareAccelerated option is enabled in the Android manifest. Apparently, this is not a Dojo nor a Cordova issue.
  • Differently, on most of the devices where the textfield duplication issue exists for the ScrollableView in Cordova container, it also exists when running the same Dojo code directly in the browser. Hence, it is not a Cordova issue.
  • However, on HTC Sensation (Android 2.3.4) the behavior is again surprising: the scrollable view allows scrolling under Cordova while it doesn't scroll at all as a webapp (with or without the keyboard shown, using any value of the scrollType parameter...).
  • For both the flickering and the textfield duplication issues there are since long recurrent complaints on forums, mostly against PhoneGap in conjunction with jquery, sencha, or dojo.
  • The behavior is the same if you disable the dojox.mobile options that try to hide the address bar (mblAlwaysHideAddressBar: false, mblHideAddressBar: false). Hence it seems unrelated with the tricky mechanism used for that purpose.

Attachments (1)

testScroll-Android18-Cordova-1.6.1-without-dojo.zip (204.8 KB) - added by Adrian 2 years ago.
Adrian Vasiliu, IBM, CCLA

Download all attachments as: .zip

Change History (13)

comment:1 Changed 2 years ago by Adrian

A number of workarounds have been found. Depending on the issue and/or the device, these either solve the issue totally or bring an improvement. Found so far:

1/ Setting the "adjustPan" mode for the <activity> in the Android manifest:

<activity android:windowSoftInputMode="adjustPan" .../>

See http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

Effect: disables the page scrolling while the virtual keyboard is open (while you still get autoscroll such that the field is visible while typing). Now, this does not prevent the scrolling when a ScrollableView is used, but apparently it does reduce the flickering and/or field duplication troubles on some devices, probably because it avoids cumulating the effect of scroll at page level plus our widget.
Can also be enabled in the native code:

...
import android.view.WindowManager;
...
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   // BEGIN ADDED CODE
   this.runOnUiThread(new Runnable() {
      public void run() {
         getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
      }
   });
   // END ADDED CODE
   ...
}   

2/ Enabling the hardware acceleration for the <application> (only for Android >= 3.0):

<application android:hardwareAccelerated="true" .../>

See http://developer.android.com/guide/topics/manifest/application-element.html#hwaccel

Effect: removes the flickering on the Android 3.1 (the only one where flickering occurs), and reduces a bit the field duplication on some devices (the "cloned" field comes to the correct position quicker).
Unfortunately, as documented by google, this option is usable only for Android >= 3.0 (on Android 2.x, it isn't no-op, it simply breaks the build of the Android project). Therefore, for using this option, android level 11 is the min required version:
<uses-sdk android:minSdkVersion="11" />. Using it forbids you from providing a unique APK for all Android versions.

3/ Combining both #1 and #2 (for Android >= 3.0)

4/ Customizing ScrollableView's scrollType parameter.

This accepts the values 0, 1, and 2. When scrollType=1, the scrolling uses the -webkit-transform:translate3d(x,y,z) style, when scrollType=2 we use the top/left style, and with the default value 0 the values 1 or 2 are automatically chosen depending on the Android version: top-left for android < 3.

Effect: the behavior for Android 3 is improved by forcing the scrollType=2 for Android < 4. But scrollType=2 makes it worse for Android 4 (at least those we tested). Hence for now the less evil workaround consists in using the following subclass ("inlined" version:

    require([
         	"dojo/_base/declare",
         	"dojo/_base/sniff",
         	"dojox/mobile/ScrollableView"
         	], function(declare, has, ScrollableView){
         		return declare("com.ibm.mobile.appcenter.ScrollableView2", ScrollableView, {
         			constructor: function(){
         			},
         			init: function(/*Object?*/params){
         				if(has('android') < 4){
         					this.scrollType = 2;
         				}
         				this.inherited(arguments);
         			}
         	});
     });

As of today, the best workaround consists in using the adjustPan Android option plus the above subclass of ScrollableView (if you can afford creating an APK dedicated for Android >= 3, you can also add the hardwareAccelerated option). This solves all troubles except the field duplication on Android 4. Of course, if the ScrollableView is not really mandatory in the view containing text fields, replacing it by a View is even better.

==============================

Apparently related (more or less closely):

Last edited 2 years ago by Adrian (previous) (diff)

Changed 2 years ago by Adrian

Adrian Vasiliu, IBM, CCLA

comment:2 Changed 2 years ago by Adrian

The attached Android/Cordova project does not contain the Dojo code. To be able to build the APK for Android, you need to copy a built version of dojo 1.8 into the directory assets/www. (The use of the built version is mandatory because of Android bug http://code.google.com/p/android/issues/detail?id=5343 .)

comment:3 Changed 2 years ago by Adrian

To keep track of it, here is a suggestion received from Damien Garbarino (9 May 2012) about ScrollableView:

About the text field being edited vs the scroll, On the Galaxy Tab 1.0 with Android 3.2 and using the scrollType="2", there's another (smaller) issue: the texfield is going over the header.
This may be related to the following other problem...

Again, on the Galaxy Tab 1.0 with Android 3.2 (and not Galaxy Tab with android 2.2), the scrollable part of the scrollable view is going over the fixed header.
The header and the scrollbar view container are in the same div with overflow none but as the header is in z-index 1 it should be over the scrollable container.
It seems that the css 3d transform has several side effects. Setting the now famous scrollType="2" is fixing the issue.

Brainstorming here: maybe a solution in the future would be to change a bit the html structure of the rendered scrollview:
Instead of :

<top_container overflow-x:none overflow-y:none>
	<header/>
	<content_container />
</top_container>

change to

<top_container>
	<header/>
	<scroll_container  overflow-x:none overflow-y:none>
		<content_container />
	</scroll_container>
</top_container>

comment:4 Changed 2 years ago by cjolif

  • Cc cjolif added
  • Owner changed from ykami to edurocher
  • Status changed from new to assigned

comment:5 Changed 23 months ago by Adrian

Other references on input field troubles with PhoneGap/Cordova:

  • "Double input field focus" on HTC Desire with Sencha:

http://www.sencha.com/forum/archive/index.php/t-144593.html?s=05b94218754784752b0e79b8c9eda0a9

  • "Input field duplication" on HTC with Sencha and !jQueryMobile:

http://groups.google.com/group/phonegap/browse_thread/thread/8f51a7d3992e23aa

comment:6 Changed 12 months ago by Adrian

Just to mention that, at a quick attempt some time ago (may need to be tried again), modifying the structure of scrollable view as suggested by DG (see #comment:3) didn't seem to help.

comment:7 Changed 11 months ago by pruzand

  • Owner changed from edurocher to pruzand

comment:8 Changed 7 months ago by Adrian

Although not directly related with the troubles reported here, the most annoying troubles reported in this ticket went away with newer Android versions, and the changes done in #17454 improved the scrolling experience on most Android devices. Since no further change is currently considered, I'm closing this ticket.

Last edited 7 months ago by Adrian (previous) (diff)

comment:9 Changed 7 months ago by Adrian

  • Resolution set to fixed
  • Status changed from assigned to closed

comment:10 Changed 7 months ago by Adrian

  • Milestone changed from tbd to 1.9.2

comment:11 Changed 7 months ago by Adrian

  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:12 Changed 7 months ago by Adrian

  • Resolution set to wontfix
  • Status changed from reopened to closed
Note: See TracTickets for help on using tickets.