[OPEN-760] IPhone 4 status bar hides top of app

**popnroll** · 4 Feb 2011 5:26 AM

Sencha Touch version tested:

1.01

only default sencha-touch-debug.css

Platform tested against:

iOS 4
Android 2.2

Description:

When running the application on the IPhone 4 as a stand alone app (added to homescreen), the status bar covers the top of the application.

Test Case:

Code:

     <!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" src="lib/sencha-touch/sencha-touch-debug.js"></script>
    <script>
        var startPanel = new Ext.Panel({
            fullscreen: true,
            layout: 'vbox',
            items:[
                {html:"test"},
                {html:"test2"},
            ]
        });
        Ext.setup({
                onReady: function(){
                    rootPanel = new Ext.Panel({
                            fullscreen:true,
                            layout: 'card',
                            items:[
                                startPanel
                           ]
                    });
                }
        });
    </script>
    <link rel="stylesheet" href="lib/sencha-touch/sencha-touch-debug.css">
</head>
<body>
</body>
</html>

Steps to reproduce the problem:

Visit the application url
Add the application to your homescreen

The result that was expected:

The application shows two rows with text: "test" and "test2"

The result that occurs instead:

Only test2 is visible, test is behind the status bar

Screenshot or Video:

attached

Debugging already done:

Tested on android, which works. Tested changing margin on the x-fullscreen element, which fixes the issue

Possible fix:

A workaround is to add .x-fullscreen{margin-top:20px}
Could this be related to a change in where the content area below the status bar starts? I read somewhere that if you leave the statusbar as default or set it to black, the content should start below it. If you however set it to black-translucent, it should start at the same vertical position as the status bar.

[OPEN-760] IPhone 4 status bar hides top of app

Thread Tools

Search Thread

Display

[OPEN-760] IPhone 4 status bar hides top of app

[OPEN-760] IPhone 4 status bar hides top of app

Similar Threads

[OPEN-678] YESNOCANCEL Issues on iPhone 3G

[OPEN-737] Bug height init on iPhone

[OPEN-445] iPhone is not detected when desktop safari is set to use iPhone user agent

App does not reposition after keyboard hides on iPhone 4.1, works on Android