iOS15からSafariでは画面下部にナビゲーションがつくようになった
このナビゲーションはスクロールの方向によって大きさが変わる
position:fixedを使って高さいっぱいの手前にoverlayするモーダルをつくる場合、大きい方のナビゲーションが表示されている状態でスクロールさせると、モーダルの高さがナビゲーションの縮小に追随できず下に隙間ができてしまう
そして、スクロールが終わると急に吸着する挙動になる
iOSの仕様というかバグというか、これに付き合わなければならないみたい
対策
いろいろ調べた結果、モーダル表示時に以下のスタイルをあてるととりあえず回避できる
- bodyタグに
position: fixed; overflow: hidden; inset: 0px;
※スクロール位置を保持したい場合は、topを調整する - htmlタグに
height: 100vh;
まず、1. はよく見かけるが、これだけおこなった場合
下のレイヤーも上のレイヤーも、大きい方のナビゲーションの高さ分上に押し上げられるような見た目になる
これによってスクロールによるナビゲーションの伸び縮みに関係なく常にその高さ分のスペースが確保されるので、事象は解決するが、何も描画されない無駄なスペースができてしまう
そこで、2.のスタイルも追加であてる
これにより無駄なスペースもなくなり、事象も解消する
ただ、position: fixed;やheight: 100vh;など、何か想定外の操作でモーダルを閉じてもスタイルが外れない場合、ユーザが先に進めないなどの障害になりうるので気をつけたいところ
