Ich habe mich schon eine Weile umgeschaut, und ich kann anscheinend keine Lösung für dieses Problem finden. Wenn ein Eingabefeld in einer mobilen Safari den Fokus erhält (andere Browser wurden nicht überprüft), springt ein festes Element aufgrund der Safari, die dieses Element sichtbar macht (näher an der Mitte). Der Fehler tritt nur auf, wenn ein Benutzer geblättert hat. Wenn der Benutzer noch oben auf der Seite ist, geschieht nichts.Feste Kopfzeilen mit Textfeldern auf mobilen Safari-Websites
Vor & Nach Screenshots
Hat jemand eine Ahnung, wie dieses Problem beheben? Die einzige Lösung, auf die ich gestoßen bin, besteht darin, nach oben zu scrollen, wenn ich fokussiert bin, und dann auf Unschärfe zurück in die Position zu scrollen ... das scheint eine sehr schlampige Lösung zu sein.
Hier ist die Beispielseite in den Screenshots, sehr einfach, nichts außerhalb der Norm.
<!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>
http://stackoverflow.com/questions/7970389/ios-5-fixed-positioning-and-virtual-keyboard – Petah
Das sind alles ziemlich schlampige Lösungen, und die Top funktioniert überhaupt nicht in meinem iOS-Simulator . – Ian