It will be difficult for me to explain, but I will try: First, my web page works with mobilebrowser in iOS6.x, Android, W7 and IE9 browsers for browser, Safari and Chrome. The problem occurs in the Apple browser for the Safari browser in iOS7. I had a problem with a sticky footer and virtual keyboard, but this was solved here
Now I have a problem while scrolling the page. When scrolling down, usually the navigation bar will be hidden, and the address bar will decrease on iOS7. This is not happening. The content between the fixed header and footer scrolls, but the bottom of the content is overlapped by the footer and the navigation bar. I have to wait for the scrolling to stop before I can scroll down again. Then the address bar will decrease, the navigation bar will be hidden, and the bottom content will be displayed. When Iām at the bottom of my page and I want to scroll back, the same thing happens: just up: scroll up, heading and tiny address bar overlap the top content, wait for the scroll to stop, then scroll again to expand the address bar, display the navigation bar and display the top content. Hope this image can help:
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; background: -moz-linear-gradient(top, #206493, #2375ae, #2785c7 85%); background: -webkit-linear-gradient(top, #206493, #2375ae, #2785c7 85%); background: -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); background: -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); background: linear-gradient(top, #206493, #2375ae, #2785c7 85%); background: -webkit-gradient(linear, left top, left bottom, from(#206493), to(#2375ae), color-stop(85%, #2785c7)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493', endColorstr='#2785c7',GradientType=0 ); } #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; 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); background: -webkit-linear-gradient(top, #999, #666 2%, #222); background: -o-linear-gradient(top, #999, #666 2%, #222); background: -ms-linear-gradient(top, #999, #666 2%, #222); background: linear-gradient(top, #999, #666 2%, #222); } #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 { 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>