【フロントエンド】iphoneでwebサイトを画面上下いっぱいまでスワイプした時に出る白い余剰画面の件

Question

わかりづらいタイトルで申し訳ありません。

PC, SP双方で利用するwebアプリケーションを作成しています。

そこで、iphoneのsafariでアプリケーションをテストしたところ、ページの下の端、上の端を超えてさらにスクロールしようとすると、それぞれの端の先に真っ白な画面が表示されます。

スワイプしている指を離せば白い画面は消えてくれるのですが、縦に短いアプリのためその動作が気になります。

これはiphoneの仕様でどうしようもないのでしょうか？

調べようにも検索ワードがわからず同じような問題についてのサイトを見つけることができません。

どなたかiphoneの仕様に詳しい方がいらっしゃいましたら、ご教授いただけると幸いです。

Comments

[m.ts10806]

Androidではどうでしょうか。スクリーンショットなどの提示は可能ですか？この内容だけだとコードもありませんし、誰も再現確認がとれません。

Answer 1

html{
  background-color: /*ヘッダー・フッターの色*/;
}

これで誤魔化す方法を真っ先に思いつきましたが，こんな情報もありました
いずれも試したことがなく，どの程度効果があるのか分かりませんが，どうでしょうか？

• 「端っこ」におけるスクロールの挙動を制御する overscroll-behavior プロパティ
• iPhone safari/chromeでバウンスさせない！
• スマホの画面の上下端でビヨーンってスクロールしちゃうのは嫌だ
• CSSでMac版Chromeなどの領域外スクロール（バウンススクロール）を無効にする
• アイフォンの縦スクロールバウンスを禁止にしたい

あと，もし上下の要素が固定でなかったら，
position: absolute;,position: fixed;も試してみてください

ちなみに検索キーワードは，iOS・Safari・スクロール・バウンド・バウンス等でした

Comments

[yu-smc]

あの動作はバウンスと呼ぶのですね！

添付いただいたリンクの２つ目などで対応できそうですが、今回はbackground-colorを使用してごまかすことにしました。

曖昧な質問にも関わらず、意図を正確に汲み取ってくださりありがとうございます！