position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう というiOS Safariの困った挙動を解決した際の知見を共有します。
参考リンク
- iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう
- Safari in ios8 is scrolling screen when fixed elements get focus
- iPhone では Safari でタブバーが表示されていると fixed な要素の計算上の位置がずれる
コード
style.css
@media screen and (max-width: 768px) {
html, body {
-webkit-overflow-scrolling: touch !important;
overflow: auto;
height: 100%;
}
body {
position: relative;
overflow-x: hidden;
min-height: 100%;
}
}
これで解決しました。例えばpositiion:fixed
しているヘッダー内の検索ボックスなどにフォーカスが当たっても、スクロールが発生しません。