Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      1  

    Exclamation Orientationchange repaint issue ICS (Android 4.0.3) in webview

    Orientationchange repaint issue ICS (Android 4.0.3) in webview


    Hi.

    Stumbled into a very interesting problem. I am using a ASUS Transformer Prime (TF201) on ICS 4.0.3

    When deploying the app via a webview and Phonegap/Cordova the app doesn't repaint properly when switching between landscape and portrait and vice versa. e.g. when going from Landscape to portrait the panel gets stuck half way through in the screen and doesn't re-size correctly. I tried to do it manually via window.innerWidth etc. but that also doesn't return a proper and reliable size.

    Additionally I found out that Landscape and Portrait are reversed when using using the OrientationChange listener. This also happens to be the case in the standard browser, but the repainting works correctly from within the browser.

    Does anybody experience similar issues or run has a workaround?

    Thanks again!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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


    So the webview isn't updating?
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    Yes exactly + it looks like portrait and landscape orientation change are switched (at least on ASUS Transformer Prime).

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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


    If the document body isn't being sized then this would be an issue with PhoneGap. If the Ext.Viewport isn't being resized but the document body is then that would be a mix of issues.
    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.

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    OK, thanks.

    how about the orientationchange and switched landscape/portrait detection. Did you experience something similar in your tests or can replicate that on your end?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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


    Quote Originally Posted by squarefan View Post
    OK, thanks.

    how about the orientationchange and switched landscape/portrait detection. Did you experience something similar in your tests or can replicate that on your end?
    Thankfully my Transformer Prime is now a paperweight, it won't charge so I can't test with it and I have to reinstall my android sdk as the emulator won't start up.
    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.

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default




    Ah the wonderful world of Android development. Had to flash my Prime SKU to get the ICS update... pain in the neck.

    I also got a second test device that runs on Android 3.2.1 - exhibits the same behaviour. It seems that sometimes on a new application starts (how accurate is that!) Touch 2 gets "confused" and switches Landscape/Portrait.

    Update: It seems to be happening more often when started from Landscape mode.

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    So looking further into the issue it is a problem of both Touch 2 and ICS.

    As mentioned Sencha touch does not correctly report back Landscape and Portrait orientation; thats probably due to the case that it was developed and tested against an Emulator, since there are mentions online that the emulator inverses Landscape/Portrait.

    Unfortuantely it looks like that ICS also gets "confused" sometimes and switches width/height even though the webview is properly resized (tested with an non Touch element positioned absolute at the bottom as an overlay).
    I tried to resize the panel manually but it looks like the Viewport or whatever is responsible for drawing the Touch 2 Layout on the screen is still locked the wrongly reported height/width and doesn't let me resize my panel over a certain threshold... namely the height of the normal landscape (since ICS swichtes widht/height randomly).

    I am testing now with manual Ext.Viewport resizing to see if I can manage it reliable that way. I'll keep you posted.

    UPDATE: So I tried resizing the Viewport manually.. which should give me the correct layout but it seems that the resizing is not applied properly.

    e.g. the Portrait is cutoff at the height of Landscape. Absolute overview at the bottom outside Touch does still work.. but I cannot get the Viewport to expand past the height of the Landscape orientation (which is wrongly reported by ICS)....

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Exclamation


    @mitchellsimoens

    did you have the chance to look into the issue? It looks to be an issue from Touch's side in combination with ICS. I actually created a new Android Project with the latest SDK and created the Webview manually (not using Phonegap) and the problem persists - tested on both the Simulator and actual device ASUS Transformer Prime TF201 ICS 4.0.3.

    It seems to be a bug in the Viewport of Touch 2 that somehow doesn't recognize the orientation change or misinterprets it and re-sizes to the wrong height (as mentioned absolute positioned elements are displayed correctly).

    I think this is a rather severe issue making Touch 2 virtually unusable on newer phones/tablets (in combination of no Android 3 support). I am currently working on an Android Tablet project and feedback would be appreciated to see if this can be resolved by a patch, override etc.



    If any other user is running into the same problem please let me know!

  10. #10
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      1  

    Default @ squarefan...

    @ squarefan...


    I ran into a similar issue with Android 2.3, ST2, and orientationchange. I did extensive testing on a couple of Android devices (high and medium density) in an attempt to figure out what was going on and found out something that may be relevant to your issues. The basis for my testing was this post on stack overflow:

    http://stackoverflow.com/questions/1...ith-javascript

    What I discovered with my app was a timing issue. Android's browser will perform a resize event after an orientationchange event. When I queried screen.width/height and window.innerWidth/Height, I discovered that it took varying durations to report the correct resolutions after an oreintationchange event. ST2 was effectively resizing based on the wrong numbers. I only experienced this problem consistently on a high density screen, but it would still happen intermittently on a medium density screen.

    To overcome this, I simply poll the screen width/height every second and perform a conditional re-size if ST2's viewport width/height does not match the screen.width/height. This is not the most elegant solution, but it may be a good test to see whether or not your issue is related to timing as well.

    The code I use is here (I perform this outside my app):

    Code:
            var resizeViewport = function(){
                if(Ext.Viewport.getWidth() !== screen.width || Ext.Viewport.getHeight() !== screen.height){
                    Ext.Viewport.setSize(screen.width,screen.height);
                }
            };
            
            setInterval(resizeViewport, 1000);