Sencha Touch 2.3( include 2.4, I read the source code ) has a bug on IOS7.1( only on IPad ), what we can see is: SOMETIMES the viewport( the <body> tag ) has a wrong 'height' style( with "!important" postfix ), so the UI cannot fullscreen OR bigger than the screen( especially the situation that embedded <iframe> )
here is the screenshot: <body> tag use a wrong height( should be use 'window.innerHeight' but use the 'window.outerHeight', but not just so simple like that, please continue reading )
Here is the solution:
1. Open "/touch/src/viewport/Ios.js", go to line no: 172, the "getWindowHeight" function is not right, we should modify like this:
Code:
getWindowHeight: function() {
// console.log( 'Fixed getWindowHeight.' );
// return this.stretchHeights[this.orientation];
return window.innerHeight;
},
And remember modify the files below at the same time( line no: 92145 ) :
"touch/sencha-touch-all-debug.js"
"touch/sencha-touch-all.js"
2. Event we did the "1.", but the 'window.innerHeight' is still not CORRECT before the UI has painted( no matter "Ext.Viewport.onReady" or "Ext.onDocumentReady" event, I've tried "console.log( window.innerHeight ) " inside the 'single testing/production file which packaged by Sencha CMD' on different event handler ), so we HAVE TO add this code after the "main/first UI" has painted( the 'window.innerHeight' value is correct at this moment ):
Code:
if ( Ext.os.is.iPad && Ext.os.version.gtEq('7') ) {
Ext.Viewport.setHeight( window.innerHeight );
}
like this:
IOS7.1 UI height Bug solution share :)
Aucun commentaire:
Enregistrer un commentaire