Screen is jumping up and down while typing on Android

[psenough]

there is some matrix3d stuff in there (the original sencha-touch.css's) but i believe they are there for iphone use only. they are all always override by .x-android which i really don't know if it's actually beeing identified properly on the actual device, so i guess my next step is to test that. sometime in a near future.

thanks for the hints!

[psenough]

commenting any and all mentions of
-webkit-transform: translate3d(0, 0, 0);
or
-webkit-backface-visibility: hidden;
on the .css didnt fix it

also tried commenting out matrix3d stuff, still didnt fix it, but did b0rk the carousel sliding.

found some older threads about this very issues. supposedly has been investigated and already fixed, maybe only on some androids.

[Steffen Hiller]

The first I did was disabling the css file, and load my ST form without any css.
This showed me that it definitely had something to do with the css and not any js event interceptions since the jumping didn't occur anymore after I disabled the css.

[criess]

Hi,
on our project the backface-visibility property led to weird scrolling and jumping of forms on the andorid platform, too. Fixing this by removing the aforementioned property also repaired some issues with rendering (doubled, misplaced) inputs when they got focused (on android).

Regards
Christoph Rieß

[mporadek]

I can confirm that this problem is caused by 3d css translations. But bigger problem is, that scroller uses 3d translation to move content, so everytime you use it, you can count there will be problems sooner or later.

Solution might be to turn off 3d translation and use 2d instead. You can do that in Element.static-more.js in method cssTranslate, where you can find if-else which decides what kind of translation will be used. So simply rewrite it to use 2d only. And since this happens on android only, I suggest using Ext.is.Android to leave 3d translations turned on for iOS.

Edit: or if you need to be sure that 3d translations won't be used, rewrite Ext.supports.CSS3DTransform to return always false for android

[dean.wild@pagesuite.co.uk]

This has caused me a lot of headaches. I am creating a very big app for a well known New York based publisher and it has several forms with text entry on them. I am creating a "native" app using Sencha with Phonegap.

Removing the rule "-webkit-backface-visibility: hidden; " solves the issue 50% of the time but I can still cause the bug sometimes by scrolling the window whilst typing and sometimes when I click away from the text field and go back to it. It is very device-dependent as well, HTC phones with the sense UI are the worst and even with this rule removed they do it all of the time.

The problem is that when the soft keyboard comes on screen it reduces the size of the webview so your "fullscreen" web app no longer fits inside it and it becomes scrollable.

Since I am creating this using phonegap I have the luxury of being able to modify the application manifest. The solution is to modify your app's activity node in the manifest xml file, add the following to your app's activity:

android:windowSoftInputMode="adjustPan"


So:

<!-- Before -->
<activity android:configChanges="orientation|keyboardHidden" android:label="@string/app_name" android:name="PhotoGap">

<!-- After -->
<activity android:configChanges="orientation|keyboardHidden" android:windowSoftInputMode="adjustPan" android:label="@string/app_name" android:name="PhotoGap">


Now the keyboard will overlay on top of the webview instead of below it and forcing it to resize. Your scrolling issues will be gone (EVEN on HTC phones....!)

I hope this helps anyone having the same headaches I did!

[dlouwers]

Hi,

A colleague of mine has noticed that issues with forms are reduced dramatically when wrapping all fields in a fieldset. No idea how and why but it solved some of the issues. Meanwhile card sliding still looks horrible in Android + PhoneGap + Sencha. Using a Galaxy S2 myself.
Would love to hear when there is a fix for this.

Best,

Dirk Louwers

[mitchellsimoens]

1.1.1 is currently being worked on. No new features really but we are trying to get a handle of Android. The problem being is that every Android device (like a million out now) is different. Each manufacturer has it's own WebKit implementation so it makes it quite hard. That and Android's browser isn't as good as, say, iOS in many areas and 3D CSS is one of them.

We are trying to accomodate every device we can but we also don't want to bloat things too much

[lylepratt]

I've worked out an admittedly nasty hack to solve this without creating flickering issues by removing "backface-visibility". Basically, I am using the 3d transform styles one panels that DO NOT have forms on them. I am removing the styles on panels that have them, then re-adding them when those form panels deactivate. Yes, I know, its hacky and ugly, but its working.

All other solutions that have been suggested have either recreated flickering issues for me on android, are phonegap only fixes, or simply do not work. This is the only solution I have been able to use that seems to work in all cases.

Basically it works like this:

var removeFlickerFixStyle = function() {
    document.getElementsByTagName('head')[0].removeChild(document.getElementById('flickerStyle'));
}


var addFlickerFixStyle = function() {
    var el = document.createElement('style');
    el.type = 'text/css';
    el.id = "flickerStyle";
    el.textContent = ".x-panel{-webkit-perspective: 1000;-webkit-backface-visibility: hidden;";
    document.getElementsByTagName('head')[0].appendChild(el);
}

var panelWithForm = Ext.extend(Ext.Panel, {
   items: [
       {
            xtype: form,
            cls: 'my-example-jumpy-form'
       }
   ],
   listeners: {
       activate: function() {
           removeFlickerFixStyle();
       },
       deactivate: function() {
           addFlickerFixStyle();
       }
   }
});

[psenough]

have to test that hack fix of yours. thanks for the hint.