iOS Safari CSSの位置がテキストエリアにフォーカスされているときに固定

Question

ユーザーがページをスクロールするのに必要な長さの簡単なhtmlページがあります。私は、ページの下部に位置とdivを持つことを望む：固定し、彼の中にテキストエリア。 ユーザーがテキスト領域をクリックして仮想キーボードが表示されたら、この写真のようにページの中央ではなく、div位置を下にしておきます。

ここで使用したコードは次のとおりです。 https://jsfiddle.net/capz19yg/

.inputFixed{ 
     position:fixed; 
     bottom:0px; 
     right:0px; 
     width:100%; 
     height:50px; 
     background-color:lightgrey; 
    } 

    textarea{ 
     height:40px; 
     width:300px; 
     position:absolute; 
     bottom:5px; 
     right:10px; 
     padding:0px; 
     margin:0px; 
     border:none; 
    } 


<div class="inputFixed"> 
    <textarea></textarea> 
</div> 

これに修正がありますか？多分、いくつかのJavaScriptは修正を行うために？

Answer 1

おそらく、問題はiOS Mobile Safariのよく知られたバグに関連しているかもしれません。スクロール/フォーカスジャンプと固定配置で起こるかもしれません。多くの人々がそれについて書いており、多くはハックをしたり、デザインを変更して問題を部分的に解決しました。

• Stackoverflow: Safari in ios8 is scrolling screen when fixed elements get focus
• Issues with position fixed & scrolling on iOS
• Mobile Safari (Whyyyy?!)