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

タイトル通り

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

どうしたか

プロダクトの仕様上、

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

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

sample

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

とした。