Cabeçalhos fixos com campos de texto em sites de safari para dispositivos móveis
Eu tenho procurado por algum tempo, e não consigo encontrar nenhuma correção para esse problema. Quando um campo de entrada ganha foco em um safari móvel (não checou outros navegadores), um elemento fixo saltará devido ao safari colocando esse elemento em exibição (mais próximo do centro). O erro ocorre apenas quando um usuário tiver rolado, se o usuário ainda estiver no topo da página, nada ocorrerá.
Antes e depois screenshots
Alguém tem uma idéia de como consertar isso? A única solução que encontrei é rolar de volta ao topo quando focado, em seguida, no borrão rolar de volta para a posição ... isso parece uma solução muito desleixada.
Aqui está o site de exemplo nas imagens, muito básico, nada fora da norma.
<!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>