Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: iOS 7 issue with iPad in landscape mode

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-4917 in Touch 2.3.0-RC (37).
  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    8

    Default iOS 7 issue with iPad in landscape mode

    REQUIRED INFORMATION

    Sencha Touch version tested:
    • Sencha Touch 2.2.1
    • Sencha Touch 2.3 beta 2
    Browser versions tested against:
    • Safari iOS7 (Build 11A465 September 10, 2013) on iPad 2 (WiFi only)
    • Safari iOS7 GA on iPad 2 (WiFi only) and iPad 3
    Description:
    • The application viewport is not correctly sized in landscape mode on an iPad running iOS7.
    • The initial load of an application will cause components docked at the bottom of the screen to be cut-off (see attachments)
    • Rotating the application to portrait mode then back to landscape mode will then correctly position the docked component at the bottom of the screen. However the top of the application is moved behind the Safari toolbar causing any components docked at the top to be obscured from view.
    Steps to reproduce the problem:
    • Open the Sencha Touch 2.2.1 examples with an iPad running iOS 7 in landscape.
    • Open the "Bottom Tabs" example
    • The bottom tab component will be cut-off at the bottom of the screen
    • Rotate the device to portrait (this should correct the issue with the bottom tabs)
    • Rotate the device back to landscape mode. The tabs will now be displayed correctly but the top of the application will be moved behind the Safari toolbar.
    The result that was expected:
    • The bottom tabs should not be cut-off on initial load
    • The top of the application should not be hidden behind the safari toolbar at the top of the back after changing device orientation.
    The result that occurs instead:
    • The application viewport is not correctly sized in landscape mode on an iPad 2 running iOS7 causing issues accessing components docked at the top and bottom of the screen.
    Test Case:
    • This issue can be reproduced using examples shipped with Sencha Touch 2.2.1 or Sencha Touch 2.3 beta 2
    HELPFUL INFORMATION

    Screenshot or Video:
    • attached
    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • None
    Attached Images Attached Images
    Last edited by msardi23; 18 Sep 2013 at 3:15 PM. Reason: Updated versions tested against

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108

    Default

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

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Posts
    8

    Default

    This apparently works in Sencha 1.x. Seems like most everything regressed with Sencha 2.x

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Posts
    8

    Default

    Is this bug in any way related to TOUCH-4319? They seem very similar.

  5. #5
    Sencha Premium User
    Join Date
    Jul 2009
    Posts
    80

    Default Noticed tip

    I noticed that if I got the issue , I am rescued by double tapping the time top of display.

    But why?

  6. #6

  7. #7
    Sencha Premium User
    Join Date
    Jul 2009
    Posts
    80

    Default

    Thank your resposen Samorini.

    I understood this problem.
    And I knew that this problem is not occuered on the Sencha Touch 2.3.0 but not fixed form input with keybord input on iOS 7 safari with landscape mode.

    Does Anyone know the slution?

    Thank you.

  8. #8
    Sencha User
    Join Date
    May 2011
    Posts
    8

    Default

    Hi Koujiid,

    You are right - it looks like Sencha has included the fix in the GA version of Sencha Touch 2.3 (not sure if an update will be provided for older versions of the framework).

    But as you suggest when the onscreen keyboard is displayed the viewport issue reoccurs. As a temporary fix I created an override for the onBlur function on the text field, this calls the new function setViewportSizeToAbsolute that corrects the viewport display issues for iOS 7.


    Code:
    // Fixes bug with text field on iOS 7
    Ext.override(Ext.field.Text,{    
        onBlur: function(e) {
            var me = this;
    
    
            this.removeCls(Ext.baseCSSPrefix + 'field-focused');
            this.isFocused = false;
    
    
            me.fireEvent('blur', me, e);
    
    
            setTimeout(function() {
                me.isFocused = false;
                // Start fix for iOS 7
                if (Ext.os.version.gtEq('7') && Ext.os.deviceType === 'Tablet'){
                    Ext.Viewport.setViewportSizeToAbsolute();
                }
                // End fix for iOS 7
            }, 50);
        }
    });
    I have not done enough testing with Sencha Touch 2.3 and iOS 7 to understand what other scenarios might cause this issue to reoccur.

    FYI - If you have a look in the sencha-touch-all-debug.js file that shipped with 2.3, the fix for the viewport issue starts on line 91845 and ends on line 91909.

    Hope this helps.

    Cheers,
    Matt

  9. #9
    Sencha Premium User
    Join Date
    Jul 2009
    Posts
    80

    Red face Good Job!!

    Hi, msardi,

    I tried it your solution in my application on Sencha Touch 2.3.0.
    And I could resolve the issue on the iOS 7 on iPad with landscape mode.
    Thanks your help.

  10. #10

    Default

    hi ,,,

    sencha touch 2.3.0 and sencha cmd4 version to builded the ios app for ipad but not installing in ipad...... please help me........

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •