position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう　というiOS Safariの困った挙動を解決した際の知見を共有します。

参考リンク

コード

style.css

@media screen and (max-width: 768px) {
    html, body {
        -webkit-overflow-scrolling: touch !important;
        overflow: auto;
        height: 100%;
    }
}
@media screen and (max-width: 768px) {
    body {
        position: relative;
        overflow-x: hidden;
        min-height: 100%;
    }
}

これで解決しました。例えばpositiion:fixedしているヘッダー内の検索ボックスなどにフォーカスが当たっても、スクロールが発生しません。

元記事はこちら

「iOS Safariで position:fixedしている要素内のinputにfocusすると、ページトップへスクロールしてしまう挙動を解決する」