崩れるパターン(body overflow: hiddenのみ)

下のボタンで利用規約モーダルを開き、規約末尾の氏名入力欄をタップしてキーボードを表示してください。その状態で見えている暗い背景や規約の外周をスワイプすると、後ろのページが動きます。

このデモはモーダル表示中に body へ overflow: hidden を指定しています。最近のiOSでは通常状態なら背景は止まりますが、キーボード表示中やピンチズームで拡大した状態では止まりません(WebKitの未解決バグ)。実機のiPhone・iPadで確認してください。

セクション 1

ここは背景ページのコンテンツです。モーダル表示中に背景が動いたかどうかは、モーダル上部の「背景の位置」の数字と、この後ろに透けて見えるセクション番号で確認できます。キーボードを出さない通常状態では背景が止まることも、あわせて確認してみてください。

セクション 2

背景ページのダミーコンテンツです。ページに高さを持たせるために置いています。

セクション 3

背景ページのダミーコンテンツです。ページに高さを持たせるために置いています。

セクション 4

背景ページのダミーコンテンツです。ページに高さを持たせるために置いています。