PDA

View Full Version : Screen is jumping up and down while typing on Android



Steffen Hiller
9 May 2011, 8:06 AM
SOLVED, see http://www.sencha.com/forum/showthread.php?132885-Screen-is-jumping-up-and-down-while-typing-on-Android&p=607900&viewfull=1#post607900

This happens in the emulator and on the actual device. (Sencha Touch 1.1)

When setting the focus, the keyboard slides up and everything is fine so far.

But when starting to type and while typing, the screen scrolls up and down.

It's easily reproducable with the official form example:
http://dev.sencha.com/deploy/touch/examples/forms/

Just type something in the first field on an android phone or emulator (2.2) and the screen jumps up and down.

paul4468
11 May 2011, 9:07 AM
Same thing is happening to me.

Steffen Hiller
13 May 2011, 7:36 PM
Btw, it's easily reproducable with the official form example:
http://dev.sencha.com/deploy/touch/examples/forms/

Just type something in the first field on an android phone or emulator (2.2) and the screen jumps up and down.

Can a moderator move this thread to the bugs forum please?

Thanks!

psenough
16 May 2011, 9:51 PM
stumbled upon this bug aswell. recently upgraded to 1.1 and the erratic jumping stopped happening, also the "focus rectangle" that would show up surrounding the selected box doesnt exist anymore (which is good since it was always placed wrongly 90% of the times) but there are still some bugs in there: when tapping into a text field on the form and the keyboard pops up the field doesnt manage to scroll itself into user view. it always ends up hidden up or down so you cant see what you're typing. :s

Steffen Hiller
17 May 2011, 4:40 AM
I'm using 1.1 already, same bug, as you can see in the official form example as well. :-/

Steffen Hiller
22 May 2011, 8:07 PM
Any news on this one?

psenough
27 May 2011, 3:40 AM
checked it again and you're right. it's still happening even on latest version.
very off-putting and serious bug. hope devs will look into it soon.

Steffen Hiller
30 May 2011, 2:41 PM
I fixed this problem for me!

The lead gave me this comment here from http://code.google.com/p/jqtouch/issues/detail?id=398:


The 3D webkit is broken in Android, causes this problem. Make sure you are not using -webkit-transform: translate3d(0, 0, 0);
or -webkit-backface-visibility: hidden; on anything related to the inputs. :(


In order to fix a flickering problem pre ST 1.1 on the iPhone,
I had in my CSS:


.x-panel {
-webkit-backface-visibility: hidden;
}


Well, ST 1.1 fixes the flicker bug a bit smarter, by:


body.x-ios {
-webkit-backface-visibility: hidden;
}


Anyway, after I removed my .x-panel rule, the scrolling bug disappeared.

Hope that helps someone!

psenough
31 May 2011, 11:30 AM
?!?!

i don't have any such rule and still get the jumping when typing behaviour. o_O

was trying some custom themes on v1.1 to see if i could figure it out, but haven't managed to fix it yet.

Steffen Hiller
31 May 2011, 11:32 AM
well, what made me wonder is, that the official form example suffers the same issue.

but again, in my case it was really that rule.

maybe you have any other 3d css rules somewhere?

psenough
31 May 2011, 2:19 PM
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
31 May 2011, 2:44 PM
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
31 May 2011, 2:44 PM
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
31 May 2011, 11:30 PM
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
29 Jun 2011, 7:40 AM
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
20 Jul 2011, 3:10 AM
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
1 Aug 2011, 9:03 AM
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 Aug 2011, 9:17 AM
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
5 Oct 2011, 8:45 AM
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
7 Oct 2011, 5:38 AM
have to test that hack fix of yours. thanks for the hint.

WallTearer
10 Feb 2012, 6:40 AM
Hello.
Did anybody find new fixes?
My problem is not only jumping textarea and input field when user is typing, but also that when you're accessing textarea or input field, it gets cloned on the page (in the random place on the screen). And that cloned version of the field is moving in a strange way on the screen when you're scrolling. Also, if you're typing in the field, you can see that both fields (original and cloned) are updated with the text.
I commented out in sencha-touch.css file all rows that have 3d transition and -webkit-backface-visibility - but still having this problem.
Device is HTC Explorer.

paul4468
10 Feb 2012, 8:12 AM
I've have been having the same exact issue as described by WallTearer for a long time on HTC EVO. I posted this a while back http://www.sencha.com/forum/showthread.php?144253-Textfield-does-not-move-with-scrollable-panel-on-Android-HTC-EVO&. There is a workaround in there but I wish they would fix this.

WallTearer
10 Feb 2012, 9:21 AM
Thanks, paul4468, I've tried your solution with adding form fields into the fieldset.
The textarea and input fields aren't getting cloned anymore, but they're still jumping on my screen.
At least, they are not cloned :)

twingocerise
29 Feb 2012, 8:16 AM
I had the same problem in a complete different context and actually I found out that this was because of the z-index of a fixed positioned div in my page. Actually, a fixed positioned div has to have the highest z-index on the page on an android wrapper. Try to set 99999 to it (or any higher than any z-index of any other absolute div) and that should do the trick. I wrote about this if you ever want to read it... http://java-cerise.blogspot.com/2012/02/android-browser-jumping-up-and-down.html

patilsagar
4 Mar 2012, 11:42 PM
i am facing the same problem. when i tap on the text box to enter text. I get 2 text box. one at the place where it is and another on top of the screen jumping up and down. this problem occurs only in HTC phone. Is there any problem with the HTC phone or is there any problem with my HTMP 5 CSS code

WallTearer
5 Mar 2012, 2:07 AM
patilsagar, take a look in this thread (http://www.sencha.com/forum/showthread.php?125489-Android-Two-fields-show-up-on-text-field-focus), maybe you will find solution there. I've posted the way how I fixed this issue in that thread.

patilsagar
6 Mar 2012, 6:42 AM
@WallTearer. I tried it but still i am facing the same problem. Is this the problem of HTC device. because this problem occurs only in this device where as it works smoothly in other android devices.

WallTearer
6 Mar 2012, 6:53 AM
Try to open Kitchen Sink demo page on your device and look how the textarea will work there. If textarea will produce the same bug on this official sencha demo, then you're probably in trouble :( If it will render textarea properly, try to figure out the differences between your code and Kitchen Sink code.

HHammer
3 May 2012, 8:06 PM
I've solved the form jumping issue in Android by replacing translate3d by translate into the all of sencha-touch.js. (there're 3 lines that containing translate3d in ver 1.1.1)

fanyuelin555
14 Jun 2012, 11:42 PM
It is HTC'S problem,there are 3 core functions based on CSS3 that are not supported on HTCs,animation,transform and transaction.In your code,there must be some rows that is related to CSS3.