iOS Safari의 액션 바 표시 영역이 탭 이벤트를 차단하므로 CSS로 처리

iOS Safari의 액션 바 표시 영역은 탭 이벤트를 차단합니다 | Orime

자신의 블로그 기사에의 유입이 적다고 하므로, 내용을 짧게 한 것을 이쪽에 투고.
긴 문장을 읽고 싶은 분은 위의 링크에서 부디.

TL;DR

iOS Safari는 액션 바가 숨어있을 때 바 높이 + 안전 영역의 탭 이벤트를 차단합니다.

따라서 창 아래 고정 버튼 요소는 한 번에 탭할 수 없습니다.

CSS로 해결하는 경우, 44px + env(safe-area-inset-bottom) 분의 마진을 취한다.

문제

웹 페이지에서 아래 고정 메뉴 — 요소를 채용한 경우, iOS Safari에서 브라우징하고 있어 스크롤하여 액션 바가 숨겨진 상태라면 한 번에 탭할 수 없다.

스트레스가 될 수 있으므로 대처한다.

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など利用することもできますね。 */
}

내 블로그에서 지정한 결과

떠있는 버튼이라고 하지만 바 타입의 메뉴 요소라고 외형이 미묘하게 될지도 모르겠네요.