2018年4月3日(火)
iPhoneのSafariで、fixedしたinputボタンが、有効にならない件 #HTML5&CSS3&JavaScript

　iPhoneのSafariで、最下までスクロールすると、画面の下部に操作系のボタン群が現れます。

　これらを表示した直後、style="position:fixed;"により画面に固定したinputボタンが、押しても反応しなくなります。

　また、scrollに関しても、ブラウザによってまちまちで、一昔より悪くなっています。未だ過渡期なんですね。

　fixedとscrollにおいては、いつまで経っても、まともな仕様とブラウザが現れません。なので、プログラマーは、逐次ブラウザの状況をチェックして、独自に工夫して利用しています。

　画面に表示されているスクロールの最上部の位置を示すducument.body.scrollTopをサポートしているブラウザは、SafariとEdgeのみでした。代わりにwindow.pageYOffsetを使うよになっているようです。

--
ducument.body.scrollTop
　↓変更
window.pageYOffset
--

　iPhoneのSafariに関しては、下記のJavaScriptを追記するだけで、問題が解決します。スクロールの最下部に位置したときに、トラブるのですが、その時点で、window.focus()することで、問題回避できました。ようは、命令を一つ噛ませれば良かったのです。

--
<script>
<!--

window.onscroll = function(){
  if(document.body.scrollHeight == window.innerHeight + window.pageYOffset){
    window.focus();
  }
}

// -->
</script>
--

　なお、AndroidのGoogle Chromeは、問題が発生しないことを確認しました。


P.S. 最初、噛ませる命令をscrollBy(0,0)していました。しつこい検証で、十中八九上手くいきますが、ダメな時もあることが分かりました。scrollBy(0,-1)では、操作系のボタン群の表示に少し支障をきたします。scrollBy(0,-0.1)もscrollBy(0,0)と同じでした。scrollBy(0,-1);scrollBy(0,1);では、もっとダメになりました。結局、scrollBy()を諦めました。

　Safariをバグフィクスしてほしいですね。
http://neconote.jp/prg/fixed_scroll.html