iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう
スマートフォンサイトを制作していて発生した問題です。
headerタグにposition:fixed;を指定しスクロール時に画面上部に常に固定配置されるヘッダーを作成しました。
そのヘッダーにinputを利用して検索ボックスを設置したのですがiOS8のsafariで検索ボックスにフォーカスをあてると、htmlの構造上ではinput要素がコンテンツより上部に存在するためか一番上まで自動的にスクロールしてしまうという問題が発生しました。
<header style="position:fixed;">
<input type="search">
</header>
aaa<br>
aaa<br>
aaa<br>
...
こちらに実際にテストができるサンプルページを作成しましたので是非iPhoneなどで閲覧していただければと思います。
ちなみに、古い機種ですがArrowsESという機種(Android2.3)では、自動的にスクロールが発生するというようなことはありませんでした。
この問題を解消する方法がわかる方いらっしゃいましたら、是非アドバイスお願い致します。