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

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][1] 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][2] 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: Title
... ... ...
[1]: https://stackoverflow.com/questions/18977540/div-element-wont-stay-at-the-bottom-when-ios-7-virtual-keyboard-is-present [2]: http://i.stack.imgur.com/RoGuX.png
Relevant article: mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

以上就是Scrolling problems on a web page with fixed header and footer in iOS7的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏