Scrolling problems on a web page with fixed header and footer in iOS7

html css browser ios7 iphone-web-app

13,050

Bugs on IOS7
On iPad, if the document body is set to 100 percent height, content is shifted upwards by 20px in landscape mode. This can be worked around by calling window.scrollTo(0, 0) on the orientationchange event.

You can look to this blog which mention what are fallback in IOS7 http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

13,050

Author by

Phu Minh Pham

Updated on June 17, 2022

Comments

Phu Minh Pham almost 2 years

This will be difficult for me to explain, but I'll try: As a start, my web page is working on mobilebrowser in iOS6.x, Android, W7 and desktop browser IE9, Safari and Chrome. The problem happens in Apple's mobile Safari browser in iOS7. I had a problem with a sticky footer and the virtual keyboard, but that got solved here

Now I've a problem when scrolling on the page. When scrolling down, normally the navigation bar will hide and the address bar will shrink on iOS7. This doesn't happens. The content between the fixed header and footer is scrolling, but the bottom of the content is overlapped by the footer and navigation bar. I've to wait for the scrolling to stop before I can scroll down again. Then the address bar will shrink, the nav bar will hide and the bottom content will show. When I'm at the bottom of my page and want to scroll back up, the same thing happens, just upwards: Scrolling to the top, the header and the tiny address bar overlaps the upper content, wait for the scrolling to stop, then scroll again to have the address bar expand, the nav bar to show and the upper content to show. Hope this image can help:

Scenario

Here are some of the css code:

* 
{
    margin: 0; padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
   height: 100%;
   margin: 0;
}
body{
    font-family: Helvetica, Segoe UI, Arial, Sans-Serif; 
    font-size: 130%;

    background-image: url('../images/background.png');
    background-repeat:repeat;

    overflow:hidden;    
}

#header
{
    text-align: center;
    color:#FFF;

    height: 45px;               
    position:fixed;
    z-index:5;
    top:0px;
    width:100%;

    top:0; left:0;
    padding:0;

    background-color:#2785c7; /* Old browsers */    
    background:    -moz-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* FF3.6+ */    
    background: -webkit-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Opera 11.10+ */
    background:     -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* IE10+ */
    background:         linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* W3C */
    background: -webkit-gradient(linear, left top, left bottom, from(#206493), to(#2375ae), color-stop(85%, #2785c7)); /* Chrome,Safari4+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493', endColorstr='#2785c7',GradientType=0 ); /* IE6-9 */
}

#footer{
    color:#CCC;
    height: 48px;

    position:fixed;
    z-index:5;
    bottom:0px;
    width:100%;
    padding-left:2px;
    padding-right:2px;
    padding:0;

    border-top:1px solid #444;

    background:#222; /* Old browsers */
    background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));  
    background:    -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */    
    background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
    background:     -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
    background:         linear-gradient(top, #999, #666 2%, #222); /* W3C */
}

#footer > div
{
    height:48px; width:52px;
    color:#AAACAF;
    text-align:center;
    font-size:0.55em;

    display:inline-block;
    cursor:pointer;
}
@media screen and (max-width: 350px)    /* Mindre skift på mobil enheder  */
{
    #footer > div
    {
        width:48px;
        font-size:0.40em;
    }
}

#scroller
{
/*    min-height: 360px;*/
    padding-top:45px;
    padding-bottom:48px;
    overflow:hidden;

    width:100%;
}

And here are some of the HTML:

<html>
    <head>
        <title>Title</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="apple-touch-icon" href="images/name.png" />
        <link rel="apple-touch-startup-image" href="images/startup.png" />
        <link rel="shortcut icon" href="/images/name.ico" />

        <link href="css/style.css?square=#VERSION" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.6.4.min.js?square=#VERSION" type="text/javascript"></script>
        <script src="js/jquery.placeholder.js?square=#VERSION" type="text/javascript"></script>
        <script src="js/javascript.js?square=#VERSION" type="text/javascript"></script>
        <script src="js/divScroll.js?square=#VERSION" type="text/javascript"></script>

        <script>
            $(function() {
                $('input[placeholder], textarea[placeholder]').placeholder();
            });
        </script>        
    </head>
    <body>    
        <form id="Form1" runat="server">
            <div id="header" style="line-height:45px;" runat="server">
                Name
            </div>
            <div id="scroller" >
                <div id="content">
                ...
                ...
                ...
            </div>
            <div id="footer" style="text-align:center">
                <div id="LoginNameLogoDiv"><img alt="Company" src="images/company_logo.png" /></div>
            </div>
        </form>
    </body>
</html>

Phu Minh Pham over 10 years

So the answer to my question is that I have to wait for Apple to fix this and 100 other things?
Arpit Srivastava over 10 years

No, there is hackfix for this issue is that you can use window.scrollTo(0,0) or add 20px extra when you land on landscape mode
Phu Minh Pham over 10 years

What about portrait mode? will this be affected to and where do you usually place window.scrollto(0,0) in the code?
Alex G over 10 years

@Arpit Srivastava, window.scrollTo(0,0) not working for ios 7 anymore, is there any other trick?