logo标签列表

iOS 9 iPhone 6+横屏模式下CSS position: fixed的问题

ioscssmedia-queriesiphone-6-plus
6

我发现在以下情况下我的固定标题出现了奇怪的问题：

  1. iPhone 6+，横向模式
  2. Safari浏览器，至少打开两个标签页
  3. 我的页面有一个position:fixed的标题，以及一个带有position:relative和height:100%的body和html元素

页面加载后向下滚动时，一切正常，标题固定在原位，Web Inspector正确显示：

enter image description here enter image description here

但是当您向上滚动并向下拉页面并释放时，页眉仍然可见于页面上，但实际上它已经移动到视口以下的某个位置（请注意Web检查器不会将其突出显示）。

enter image description here

这个事实导致所有标题元素都无法访问：您无法打开菜单、点击标志或联系按钮。
当以下情况发生时，标题将恢复正常：
  1. 向下滚动（但当您向上滚动时会再次中断）
  2. 切换到另一个选项卡并返回
  3. 或关闭其他选项卡
我尝试更改标题和正文的DOM或/和CSS，但没有任何方法可以使标题恢复正常状态。
有什么想法可以解决这个问题吗？
3
我们能否获得一个小提琴，或者更好的是一个我们可以调试的现场示例？ - Serg Chernata
1个回答
0

很抱歉成为传递坏消息的使者，但是由于您没有发布任何实际代码，我不知道您的实际问题是什么。然而，我猜测，由于您的问题涉及到position:fixed，最好的解决方法是停止使用position:fixed，因为它似乎对您不起作用。以下是如何使用绝对和相对定位同样平滑地模拟它的方法：

<html id="eHTML">
<style>
#eHTML { position: static }
#eBODY { position: relative; overflow:hidden }
#eHTML, #eBODY, #main { width: 100%; height: 100%; margin: 0; top: 0 }
#eBODY>div { position:absolute; left:0;bottom:0 }
#footer {height: 20%;background-color:#88f;width:calc(100% - 14px)/*to account in for 14px scrollbar*/;overflow:hidden}
#main {background-color:#ff8;width:100%;height:100%;overflow:auto}
</style>
<body id=eBODY>
<div id=main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,</p>
<p>sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,</p>
<p>vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<br /><br /><br /><br />
</div>
<div id="footer">
Some Random Fixed<br />
Content! Yay, it workz!
</div>
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接