CSS 位置问题:在 iOS 9 iPhone 6+ 中以横向模式修复

Posted

技术标签:

【中文标题】CSS 位置问题:在 iOS 9 iPhone 6+ 中以横向模式修复【英文标题】:Issues with CSS position: fixed in iOS 9 iPhone 6+ in landscape mode 【发布时间】:2016-06-03 11:47:30 【问题描述】:

在以下情况下,我发现我的固定标题存在一个奇怪的问题:

    iphone 6+,横向模式 Safari,至少打开了两个标签 我的页面有一个位置:固定标题和一个正文和 html,位置:相对,高度:100%

页面加载后,向下滚动时,一切正常,标题到位,网络检查器正确显示:

但是当您向上滚动并将页面拉下屏幕并释放时,页眉仍然在页面上可见,但实际上它移动到了视口下方的某个位置(请参阅网络检查器没有突出显示它)。

这一事实导致所有标题元素都无法访问:您无法打开菜单、单击徽标或联系按钮。

标头在以下情况下恢复正常:

    向下滚动(但向上滚动时再次中断) 切换到另一个选项卡并返回 或关闭其他选项卡

我尝试更改标题和正文的 DOM 或/和 CSS,但没有任何东西可以使标题恢复正常状态。

关于如何修复它的任何想法?

【问题讨论】:

我们能得到一个小提琴或更好的例子,我们可以调试吗? 【参考方案1】:

很抱歉成为坏消息的传递者,但我不知道您的实际问题是什么,因为您没有发布实际代码。但是,我猜由于您的问题是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>

【讨论】:

以上是关于CSS 位置问题:在 iOS 9 iPhone 6+ 中以横向模式修复的主要内容,如果未能解决你的问题,请参考以下文章

UIButton 在 iOS 9.3 上不显示

在ios应用程序中更改位置iPhone时如何旋转照片[关闭]

iOS 9 Safari webkit 仅在 iPad 上崩溃(iPhone 工作正常)

仅在模拟器 iPhone6 中首次启动时出现位置权限问题 - XCode 9.4.1

Iphone 6 或 Ios 8 Safari 图像随机重复问题

RSA 加密仅在运行 iOS 9 的 iPhone 4s 上失败