iOS Safariのアクションバー表示エリアが、タップイベントをブロックするのでCSSで対処する

iOS Safariのアクションバー表示エリアはタップイベントをブロックする | Orime

自分のブログ記事への流入が少なそうなので、内容を短くしたものをこちらに投稿。
長い文章を読みたい方は上のリンクからどうぞ。

TL;DR

• iOS Safariは、アクションバーが隠れた時、バーの高さ+セーフエリア分のタップイベントをブロックしてしまう。
• それゆえ、ウィンドウ下固定のボタン要素は、1回でタップできない場合がある。
• CSSで解決する場合、44px + env(safe-area-inset-bottom)分のマージンを取る。

問題

Webページで下固定のメニュ—要素を採用した場合、iOS Safariからブラウジングしていて、スクロールしてアクションバーが隠れた状態だと1回でタップできない。

ストレスになりうるので対処する。

CSSで対処する例

ポイントは metaタグのviewportに追加するviewport-fit=cover 。この記述があると、CSS変数の safe-area-inset-* にセーフエリアのサイズが返ってくるようになる。

index.html

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

style.css

.bottom-button-bar {
  position: fixed;
  left: 0;
  bottom: 44px;
  /* calc、env関数が使えない環境用にフォールバック */
  bottom: calc(env(safe-area-inset-bottom) + 44px);
  /* タップできないエリア分要素を上げる 
     あくまで一例。paddingやmarginなど利用することもできますね。 */
}

自分のブログで指定した結果

浮いてるボタンだといいけど、バータイプのメニュー要素だと見た目が微妙になるかもしれないですね。