App resizes to half screen on Android on Portrait, No TabBar on Landscape

[Nepol]

REQUIRED INFORMATION

Ext version tested:

• Sencha Touch 2

Browser versions tested against:

• Native Android 2.2 and above, also any broswer

Description & Steps to reproduce the problem::

• Ok I'll explain but the attachment show the error pretty well: SOMETIMES (a lot) when I turn the device from Portrait to Landscape the TabBar disappears, when I turn back to Portrait the App loads only in Half-screen, the other half staying white. Turning back to Landscape won't solve the problem, only reloading the App.

The result that was expected:

• That TabBar is showed in Landscape and Portrait loads in full screen

The result that occurs instead:

• There is no TabBar in Landscape and Portrait loads in half screen

Test Case:

• Source code: http://www.mrclick.mx/app/olimpus7.zip
• You can see the Production App here: http://www.mrclick.mx/app
• You can download the Native App here: https://play.google.com/store/apps/d...click.olimpus7
• Found a similar issue for iPhone and Sencha Touch 1.x but it didn't solve my problem: http://www.sencha.com/forum/showthre...scape&p=608170

Screenshot:
ANDROID-HALF.jpg


Additional CSS used:

• Included in ZIP with source code

Operating System:

• Android 2.2 and above, native app and broswer

Facts to consider:

• Happens like 50% of the time on native App
• 20-30% of the time on any Android browser.
• Tested on Android 2.2, 2.3, 3.x and 4.x (several handsets, one tablet)
• NEVER happens on first load
• The app needs to be reloaded to solve the problem
• Happens in every tab, no pattern whatsoever, is very randomly. You can use the App for a while and never see it the same as you can see it from the beginning.
• The error show more often when I load the app and turn the device before I touch the app, I mean when there has been NO interaction with the finger and the app.
• Also happens less often when I load the app in Landscape

I'll appreciate any help, thanks!

[mitchellsimoens]

Do you have a test case that we can reproduce it with? We may need code to look into the issue.

[Nepol]

I zipped the project here: www.mrclick.mx/app/olimpus7.zip, my entire code is in the app.js file. Thanks a lot!

[Jamie Avins]

Can you turn off the autoMaximize option on the Viewport to see if that's the culprit? We've seen inconsistency on Android devices that may be what you are experiencing.

[Nepol]

I've turned it on trying to solve the problem actually because I read it in some post, but the problem persist wether its on or off

[Jamie Avins]

I can reproduce this with the orientation change during loading. I do have problems with the CSS in your zip file though.

[Nepol]

Hmmm, I modified my CSS using Compass Compile only, this is in my SASS file:

$base-color: #467526;$active-color: #6C9804;
$tabs-dark: darken($base-color, 10%);
$tabs-dark-active-color: saturate($active-color, 40%);
$tabs-bottom-active-gradient: 'recessed';
$toolbar-icon-size: 1.2em;

@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
//@include sencha-toolbar-forms;
//@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
//@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@include pictos-iconmask('calendar');
@include pictos-iconmask('refresh5');
@include pictos-iconmask('note2');
@include pictos-iconmask('check2');
@include pictos-iconmask('delete1');
@include pictos-iconmask('left');
@include pictos-iconmask('home2');
@include pictos-iconmask('settings9');
@include pictos-iconmask('chat');

html, body {height: 100%;}
.tweet-wrapper {
h2 {
font-weight: bold;
padding-bottom: 3px;
text-align:left;
}
img {
border-radius: 5px; float: left;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.tweet {
text-align:left;
font-size: 70%;
margin-left: 60px;
min-height: 50px;
p{padding-top:4px !important;}
}
.posted {
float: right;
color:#999;
}
}
.x-list-paging-msg{
text-align:center;
padding-bottom:15px;
font-weight:bold;
}
.x-segmentedbutton .x-button .x-button-icon.x-icon-mask {
width: 0.9em;
height: 0.9em;
-webkit-mask-size: 0.9em;
margin-right:5px;
}
.error{
padding:20px;
margin: auto;
max-width: 300px;
text-align:center;
img{ margin-bottom:10px; }
}
.social{
div div div{
text-align:center;
}
a{
margin: 8px 10px;
display: inline-block;
width: 48px;
height: 48px;
background-repeat:none;
background-position: 0 0;
}
p{ padding-top: 8px;}
.social-buttons{
box-shadow: inset 0 -2px 5px #B3B3B3;
-moz-box-shadow: inset 0 -2px 5px #B3B3B3;
-webkit-box-shadow: inset 0 -2px 5px #B3B3B3;
}
}
.home{
background-color: #FFF;
text-align:center;
#intro-text{
font-size:16px;
padding-bottom:18px;
}

h1, h2, h3, h4, h5, h6{
margin: 0 0 10px 0;
}

h1{ font-size: 24px; line-height:120%;}
#header{
h1{ font-weight:bolder; }
padding: 20px;
background-image: url(../images/mobile_back.jpg);
background-repeat: repeat-x;
background-position:left bottom;
text-shadow: black 0.1em 0.1em 0.3em;
color:#FFF;
div {
font-size:17px;
padding-bottom:18px;
}
}
.content{
border-bottom: 2px solid #E3E3E3;
padding:15px 20px;
}
#redes{
p{ font-size:15px; }
a{
margin: 10px;
display: inline-block;
width: 112px;
height: 126px;
background-repeat:none;
background-position: 0 0;
}
}
#features{
border: 0;
th{ width: 60px; }

td, th{
padding:5px 15px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
font-size:15px;
line-height: 120%;
color: #666;
text-shadow: 1px 1px white;
text-align: left;
height:80px;
vertical-align: middle;
}
}
.grey{
background-color: #DFDFDF;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #B4B4B4;
h1{ color: #666666; }
}
#patrocinadores a{
margin: 10px;
display: inline-block;
width: 170px;
height: 142px;
background-repeat:none;
background-position: 0 0;
}
#mrapp{
color:#666;
font-size:75%;
line-height:90%;
text-decoration:none;
}
}
.x-html{ padding:0; }
.x-html table{
td, th{
border-top: 1px solid #DEDEDE;
padding:10px;
text-align:center;
}
td { background-color:#FFFFFF; }
.left { text-align: left; }
.title {
font-size:120%;
background-color:#DEDEDE;
border-bottom: 1px #FFF;
}
}
.main-table{
td, th{ font-size:90%; padding:8px;}
}

Could something here be holding the problem?

[Nepol]

Do you need additional information? I edited the original post using the bug template and included the ZIP I provided you. Thanks for all your help and your quick responses!

[stefan.mayer.netconomy]

I have the same problem and it seems like Android is sometimes reporting the old height and width values (from the previous orientation). This happens only on Android 4 with my app (at least on the tested devices). As a quick fix I changed the doFireOrientationChangeEvent function in the viewport/Android.js files of the Sencha Touch source code. I added a delay of 200ms to the waitUntil function call. Maybe this helps with your problem as well.

doFireOrientationChangeEvent: function() {
        var eventController = arguments[arguments.length - 1],
            delay = 50;


        if (Ext.os.version.gtEq('4')) {
            delay = 200;
        }

        ...

        this.waitUntil(function() {
            return this.getWindowOuterHeight() !== this.windowOuterHeight;
        }, function() {
            this.windowOuterHeight = this.getWindowOuterHeight();
            this.updateSize();


            eventController.firingArguments[2] = this.windowWidth;
            eventController.firingArguments[3] = this.windowHeight;
            eventController.resume();
            this.orientationChanging = false;


        }, function() {
            //<debug error>
            Ext.Logger.error("Timeout waiting for viewport's outerHeight to change before firing orientationchange", this);
            //</debug>
        }, delay);

...

[Nepol]

I have the same problem and it seems like Android is sometimes reporting the old height and width values (from the previous orientation). This happens only on Android 4 with my app (at least on the tested devices). As a quick fix I changed the doFireOrientationChangeEvent function in the viewport/Android.js files of the Sencha Touch source code. I added a delay of 200ms to the waitUntil function call. Maybe this helps with your problem as well.

doFireOrientationChangeEvent: function() {
        var eventController = arguments[arguments.length - 1],
            delay = 50;


        if (Ext.os.version.gtEq('4')) {
            delay = 200;
        }

        ...

        this.waitUntil(function() {
            return this.getWindowOuterHeight() !== this.windowOuterHeight;
        }, function() {
            this.windowOuterHeight = this.getWindowOuterHeight();
            this.updateSize();


            eventController.firingArguments[2] = this.windowWidth;
            eventController.firingArguments[3] = this.windowHeight;
            eventController.resume();
            this.orientationChanging = false;


        }, function() {
            //<debug error>
            Ext.Logger.error("Timeout waiting for viewport's outerHeight to change before firing orientationchange", this);
            //</debug>
        }, delay);

...

Thanks a lot I'm going to test it. I'm not crazy about modifying the Sencha's code but as you stated is a Dirty Fix, and it's better than no fix at all. Question do you happen to know if modifying the source code will affect anything when I build the production App? I mean will the changes apply? Thanks again