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

[Steffen Hiller]

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');

[fmoseley]

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

[Steffen Hiller]

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:

        // 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();
                        }
                    }
                }
            });
        }

[mmullany]

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

[skerle]

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.