修复了移动 Safari 网站上带有文本字段的标题答案

【问题标题】：Fixed headers with text fields on mobile safari websites修复了移动 Safari 网站上带有文本字段的标题
【发布时间】：2012-11-06 07:32:36
【问题描述】：

我已经四处寻找了一段时间，但似乎找不到任何解决此问题的方法。当输入字段在移动 safari 中获得焦点时（尚未检查其他浏览器），由于 safari 将该元素置于视图中（更靠近中心），固定元素将跳转。该错误仅在用户滚动时发生，如果用户仍位于页面顶部，则不会发生任何事情。

前后截图

有人知道如何解决这个问题吗？我遇到的唯一解决方案是在聚焦时滚动回顶部，然后在模糊滚动回原位......这似乎是一个非常草率的解决方案。

这是屏幕截图中的示例网站，非常基本，没有任何异常。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, scale=1"/> 
    <title>MySite</title>
    <style>
    body{
        height:100%;
        width:100%;
        padding:0;
        margin:0;
        font-size:16px;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    header, footer {
        background-color:#333;
        padding:10px;
        color:#FFF;
        width:100%;
    }
    header {
        position:fixed;
        top:0;
        left:0;

    }
    input[type=search] {
        position:relative;
        margin-left:20px;
        width:160px;
        font-size:16px;
        height:26px;
    }
    section{
        padding:10px;
    }
    </style>
</head>
<body>
<header>
<b>MySite</b>
<input type='search' placeholder='Search'>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</sction>
<footer>
&copy; MySite <?php echo date('Y') ?>
</footer>
</body>
</html>

【问题讨论】：

stackoverflow.com/questions/7970389/…
这些都是相当草率的解决方案，而最上面的解决方案在我的 iOS 模拟器中根本不起作用。

标签： javascript css header mobile-safari css-position

【解决方案1】：

我也有同样的问题。但我意识到，固定位置只是延迟而不是中断（至少对我而言）。滚动并等待 5-10 秒，然后查看搜索栏是否调整回屏幕顶部。我相信这不是错误，而是键盘打开时的延迟响应。

【讨论】：