iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。
また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリアであり、ここもタップできない。
タップできない領域は、iPhone7,8あたりはセーフエリア無しで44pxだが、iPhoneX以降は形状が違いセーフエリアがあるため更に広い。
ので、画面したから20pxとかにページ上部に戻るボタンとか置くと、最初のタップでステータスバーが出てしまう。
なので、viewportにviewport-fit=coverを指定し、
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
env(safe-area-inset-bottom)でセーフエリアを計算、画面が矩形のiPhone（iPhone8など）だとこの値は0。iPhoneX以降だと値が計算されて入る。
更にSafariでタップできない領域はは44pxなので、iOSのSafariならば
margin-bottom: calc(env(safe-area-inset-bottom) + 44px);
でトップに戻るボタンはどこにもかぶらずタップできる領域に置ける。
iOSのChromeならばステータスバー分はいらないが、セーフエリアはそのまま存在する。
margin-bottom: calc(env(safe-area-inset-bottom));
でタップできる領域に置けるとは言えるが、iPhone8などセーフエリアが0のデバイスだと一番下にくっついてしまうので、
margin-bottom: calc(env(safe-area-inset-bottom) + 20px);
のようによしなな位置においておく必要がある。
