Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    11
    Vote Rating
    0
    ChrisWTI is on a distinguished road

      0  

    Default Incorrect sizing after orientation change

    Incorrect sizing after orientation change


    Sencha Touch version tested:
    • 1.1
    • 2.0
    • only default ext-all.css
    The bug occurs in both 1.1 and 2.0

    Platform tested against:
    • iOS 5 (works fine)
    • Android 2.x (not sure the version of the phone, but it worked fine)
    • Android 4.0.4
    • Android 4.1.1
    The bug seems to only occur on Android 4.x devices

    Description:
    • When rotating the device from landscape to portrait, while an overlay is present, the resulting layout will make everything look smaller.
    • What is happening is, say that in landscape orientation the width and height of the browser is 1024x496(this is from the Galaxy Tab). Then after rotation, the width doesn't update correctly. The width remains 1024, and the height scales accordingly with the correct aspect ration of the device. So in this case the width and height are now 1024x1488. So the content is drawn for a screen size larger than what it was previously, resulting in everything looking smaller.
    Test Case:

    See this URL : http://dev.sencha.com/deploy/touch/e...ays/index.html

    Steps to reproduce the problem:


    This MUST be done on a mobile device. I have not been able to reproduce it in Chrome on a desktop. (tried resizing the window, doesn't have the same behavior)
    • hold your device in a landscape orientation.
    • press one of the "show" buttons
    • rotate the device 90 degrees
    Note: While I can consistently reproduce this bug by showing a overlay before rotating the device, I have found that the bug will also occur WITHOUT the overlay present. However, it is not reproducible consistently without having an overlay on the screen.


    The result that was expected:
    • Items on the screen should appear to the same scale as they were before the orientation change
    The result that occurs instead:
    • everything looks tiny
    Screenshot or Video:

    landscape.jpgportrait buggy.jpgportrait normal.jpg
    Debugging already done:


    I have checked the values of some variables before and after changing the orientation of the device. The values I am showing here are from a Samsung Galaxy Tab.


    Landscape Portrait Buggy Portrait Correct
    window.innerWidth 1024 1024 600
    window.innerHeight 496 1488 920
    window.outerWidth 1024 600 600
    window.outerHeight 496 920 920
    screen.width 1024 600 600
    screen.height 600 1024 1024
    screen.availWidth 1024 600 600
    screen.availHeight 600 1024 1024
    document.body.clientWidth 1024 1024 600
    document.body.clientHeight 496 1488 920
    document.body.offsetWidth 1024 1024 600
    document.body.offsetHeight 496 1488 920


    Possible fix:
    • not provided

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


    This blog may help you get around the orientation issue in ST1: http://moduscreate.com/orientation-c...e-android-bug/
    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.