修复了移动safari网站上带有文本字段的标题
Ian*_*Ian 6 javascript css header css-position mobile-safari
我一直在寻找一段时间,我似乎无法找到解决这个问题的方法.当输入字段在移动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>
© MySite <?php echo date('Y') ?>
</footer>
</body>
</html>