You found a bug! We've classified it as TOUCH-5397 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default [2.3.1a] "minimal-ui" breaks viewport position on iOS 7.1 when rotated to landscape

    [2.3.1a] "minimal-ui" breaks viewport position on iOS 7.1 when rotated to landscape


    iOS 7.1 introduced the new "minimal-ui" option for the viewport meta tag.

    In portrait it works great with Sencha Touch out of the box (and without the need to turn autoMaximize on).
    Though the viewport position breaks when rotating the phone to landscape.

    Not sure if it's an iOS bug or something Sencha Touch could solve.
    Haven't looked much into it yet, but just wanted to have it logged here.

    Below are two screenshots of a brand new Sencha Touch 2.3.1a application.
    Same behavior in dev and prod mode.

    In dev I tested it by changing line 9676 in sencha-touch.js to:
    addMeta('viewport', 'initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui');

    In prod I tested it by changing line 772 in .sencha/app/microloader/production.js to:
    addMeta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui');
    Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,977
    Vote Rating
    132
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    FYI, I'm using this workaround for now. The same issue also occurs when focussing an input field in landscape and hiding the keyboard again.

    Here's my code I added to the Ext.application launch method:

    Code:
            // Fix for an issue on iOS 7.1 when minimal-ui is enabled and phone is in landscape,
            // where the viewport is moved up in certain situations, see below.
            // Sencha bug thread: http://www.sencha.com/forum/showthread.php?282632-2.3.1a-quot-minimal-ui-quot-breaks-viewport-position-on-iOS-7.1-when-rotated-to-landscape&p=1033589
            if (Ext.os.is.iOS && Ext.os.version.gtEq('7')) {
                // Fix viewport position after orientation change
                // Applying to all orientation changes just to be sure and since it has low overhead,
                // but would theoretically only be needed for landscape
                Ext.Viewport.on('orientationchange', function () {
                    this.scrollToTop();
                });
    
                // Fix viewport position after field blur and keyboard is hidden when phone is in landscape
                // CAUTION: The 'control' method is a private method of Ext.app.Application
                this.control({
                    'field': {
                        blur: function () {
                            if (Ext.Viewport.getOrientation() == 'landscape') {
                                Ext.Viewport.scrollToTop();
                            }
                        }
                    }
                });
            }

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Location
    Bay Area
    Posts
    152
    Vote Rating
    1
    mmullany is on a distinguished road

      0  

    Default


    Thanks for the bug report Stefan - I'll update the blog post to reflect it.

  5. #5
    Sencha User
    Join Date
    Aug 2013
    Posts
    2
    Vote Rating
    0
    skerle is on a distinguished road

      0  

    Default


    fyi- window.addEventListener('orientationchange',...) is more accurate than Ext.Viewport.on('orientationchange',...) when rotating 180ยบ directly from one landscape to the opposite. With the viewport listener you will still usually see the grey at the bottom.