iOSでinput要素などの入力欄にフォーカスしキーボードが表示されたとき、position:fixedされている要素の位置がおかしくなる不具合

input要素などの入力欄にフォーカスしキーボードが表示されたとき、position:fixedされている要素の位置がおかしくなる不具合(バグ)がiOSで発生します。
この不具合はiOS7とiOS8~iOS10.2、iOS10.3でそれぞれ不具合(バグ)の症状が多少異なります。

CSS

HTML

この不具合(バグ)は、position:fixedしている要素がfixedとしての機能を失っているような表現になっています。

解決方法

JavaScriptを使用してinput要素などがフォーカスされたときに、positionをabsoluteとしスクロールした分をpositionの位置として指定、フォーカスを失ったときにもとに戻してあげることで解消することができます。

JavaScript

なお、positionの基準となる先祖要素の状態によってtopなどの位置に調整を加える必要があります。