6

我一直在四处寻找，但似乎找不到任何解决此问题的方法。当输入字段在移动 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>
4

1 回答 1

1

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

于 2013-06-24T21:17:07.900 回答