Thank you for reporting this bug. We will make it our priority to review this report.
  1. #11
    Sencha User psenough's Avatar
    Join Date
    Apr 2011
    Location
    Finland
    Posts
    24
    Vote Rating
    0
    psenough is on a distinguished road

      0  

    Default


    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!

  2. #12
    Sencha User psenough's Avatar
    Join Date
    Apr 2011
    Location
    Finland
    Posts
    24
    Vote Rating
    0
    psenough is on a distinguished road

      0  

    Default


    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.

  3. #13
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    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.

  4. #14
    Sencha User
    Join Date
    May 2011
    Posts
    1
    Vote Rating
    0
    criess is on a distinguished road

      0  

    Default


    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Ɵ

  5. #15
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
    mporadek is on a distinguished road

      0  

    Default


    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
    Last edited by mporadek; 29 Jun 2011 at 7:53 AM. Reason: new information

  6. #16
    Sencha User
    Join Date
    May 2011
    Posts
    7
    Vote Rating
    0
    dean.wild@pagesuite.co.uk is on a distinguished road

      0  

    Default


    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!

  7. #17
    Touch Premium Member
    Join Date
    Dec 2008
    Location
    Utrecht, The Netherlands
    Posts
    37
    Vote Rating
    0
    dlouwers is on a distinguished road

      0  

    Default


    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

  8. #18
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,626
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #19
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    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:

    Code:
    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();
           }
       }
    });
    Twitter: lylepratt

  10. #20
    Sencha User psenough's Avatar
    Join Date
    Apr 2011
    Location
    Finland
    Posts
    24
    Vote Rating
    0
    psenough is on a distinguished road

      0  

    Default


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

Similar Threads

  1. Replies: 2
    Last Post: 8 Feb 2012, 8:54 AM
  2. Replies: 1
    Last Post: 5 Jan 2011, 5:59 PM
  3. [OPEN] [DUPE-562] 1.0 Screen does not reposition on Android when a field is selected
    By gcallaghan in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 8 Dec 2010, 2:28 PM
  4. Android 2.2 - Jumping Forms Issue
    By meQ in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 6 Oct 2010, 1:56 AM
  5. jumping to another tab
    By mraptor in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Feb 2008, 12:18 AM

Thread Participants: 13