Orientationchange repaint issue ICS (Android 4.0.3) in webview

[squarefan]

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!

[mitchellsimoens]

So the webview isn't updating?

[squarefan]

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

[mitchellsimoens]

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.

[squarefan]

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?

[mitchellsimoens]

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.

[squarefan]

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.

[squarefan]

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)....

[squarefan]

@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!

[shaneavery]

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):

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