iOS11~12台のSafariでは、landscape時かつアドレスバー展開時に下部に50pxのスクロール可能領域が発生する


タイトル通り

about:blankのページを開き、html・body要素のheightに関わる数値を0pxに指定、overflow: hidden;とした状態であれど、タイトルのような現象が発生する。
ちなみに本記事はただの備忘録です。

どうしたか

プロダクトの仕様上、

  • document.body.scrollHeight === innerHeightでありたい
  • scrolltouchmoveの差し止めをすることはできなかった

という条件があったため、妥協の下

sample
const scrollPrevent = () => {
    if (window.pageYOffset > 0) window.scrollTo(0, 0);
}
window.addEventListener("touchend", scrollPrevent);

とした。