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

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しているヘッダー内の検索ボックスなどにフォーカスが当たっても、スクロールが発生しません。