position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう

Question

###起きている事象・解決したい問題
・CSSのposition:fixedしている要素内にフォームを設置したいが、おそらくIOSのバグでinputにフォーカスするとページトップへスクロールしてしまう
・フォーカスが入ると、強制的にfixedがabsoluteになってしまうことが原因らしい

参考：iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう

上記のようなバグで、フォームを入力することができず困っています。
何か思い当たることがあれば教えていただけますと幸いです。よろしくお願いします。
###発生条件
IOS9.1、9.2（safari）で確認済み
###ソースコード

* {
	margin:0;
	padding:0;
}
header{
	width:100%;
	height:30px;
	position:fixed;
	top:0;
	left:0;
	background-color:#F00;
	text-align:center;
}
main{
	padding-top:60px;
}
footer{
	background-color:#000;
	color:#FFF;
	text-align:center;
}

<header>
<input type="text">
</header>

<main>
<ol>
<li class="row01">行</li>
<li class="row02">行</li>
<li class="row03">行</li>
<li class="row04">行</li>
<li class="row05">行</li>
<li class="row06">行</li>
<li class="row07">行</li>
<li class="row08">行</li>
<li class="row09">行</li>
<li class="row10">行</li>
<li class="row11">行</li>
<li class="row12">行</li>
<li class="row13">行</li>
<li class="row14">行</li>
<li class="row15">行</li>
<li class="row16">行</li>
<li class="row17">行</li>
<li class="row18">行</li>
<li class="row19">行</li>
<li class="row20">行</li>
<li class="row21">行</li>
<li class="row22">行</li>
<li class="row23">行</li>
<li class="row24">行</li>
<li class="row25">行</li>
<li class="row26">行</li>
<li class="row27">行</li>
<li class="row28">行</li>
<li class="row29">行</li>
<li class="row30">行</li>
<li class="row31">行</li>
<li class="row32">行</li>
<li class="row33">行</li>
<li class="row34">行</li>
<li class="row35">行</li>
<li class="row36">行</li>
<li class="row37">行</li>
<li class="row38">行</li>
<li class="row39">行</li>
<li class="row40">行</li>
<li class="row41">行</li>
<li class="row42">行</li>
<li class="row43">行</li>
<li class="row44">行</li>
<li class="row45">行</li>
<li class="row46">行</li>
<li class="row47">行</li>
<li class="row48">行</li>
<li class="row49">行</li>
<li class="row50">行</li>
</ol>
</main>

<footer>
footer
</footer>

###実践してみたこと
①フォーカスが入った時にJavaScriptで強制的にheaderにposition:fixedをつける（インラインで）
⇒ソースを見るとfixedはつくが、挙動はfixedされていなかった

②top:0ではなくbottom:0にしてみる
⇒同じ現象が起こった

Answer 1

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

同じ問題に悩まされていましたが、これでいけました。

Answer 2

リンク先の内容を細かく見ていないので重複した回答になっていたら申し訳ありませんが、
mainをposition:absolute;にする記述だとfooterが取り残されてしまうということでしょうか？

html側の改変が難しいようであればjsの追記は可能でしょうか？
可能であれば下記のようにmain,footerの2要素を囲ってしまって、リンク先にも記載されていた方法を組み合わせてはどうでしょうか。

$("main, footer").wrapAll('<div id="fixedWrapper" />');

#fixedWrapper {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	overflow-y:scroll;
}

この方法であればhtmlの構成は変えることなくいけるかとは思いますが、
レイアウトの作り方次第ではabsoluteにすること自体が難しいかも知れないですね…。

Comments

[oshieteman]

ご回答ありがとうございます。
おっしゃる通りで、footerがいるんですよね・・・。
今回htmlの改変ができませんので、この方法を試してみたいと思います！
説明が不足している中、ご丁寧にありがとうございます。

Answer 3

リンク先に答えが載っているではありませんか。
どちらも実践してみたことには含まれていませんね。
特に、"最も役に立つ回答として採用"された回答は良い解決策だと思いますよ。

Comments

[oshieteman]

ご回答ありがとうございました。