HTMLでpaddingをvhで設定すると画面下部でノックバックされる【スマホ時】

バグなのか、それとも環境依存なのか知りたい

OS：android7.0
ブラウザ：スマホ版Chrome-v90.0.4430.210

スマホ環境でのみ発生します。
画面上部から勢いよくスワイプして画面最下部までスクロールした際、HTMLでpaddingをvhで設定していると最下部で止まらず、ノックバックされたような動きになります。

バウンススクロールとは違い、領域外が表示されることはなく、また動きにアニメーションもありません。下記サンプルでいうと発生時は最下部の「aiueo」がノックバックの結果見切れて表示されなくなります。

実機固有のバグなのかそれとも
アンドロイド、ひいてはアイフォンも含めた動作なのかを知りたいです。
手元にアンドロイド端末一台しかないので確かめられず…。

お手数をお掛けして申し訳ないのですが、
下記HTMLとCSSを試していただける方、いらっしゃいましたら試してみていただきたいです。

追記：
こちらに下記HTML、CSSを設定したサンプルページを用意しました。
スマホで試していただきたく。
https://lab.dododori.com/game/teratail/index.html

追記2：
上で書いた実機の場合はですが、
本現象はpaddingにvhを設定したときのみ発生し、%やem指定では発生しません。ページ最下部でスクロールがきっちり止まります。

参考にpaddingを%に変えたサンプルです。こちらでは発生しないハズ…。
https://lab.dododori.com/game/teratail2/index.html

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
6<link href="style.css" rel="stylesheet">
7</head>
8<body>
9	<main id="main">
10		<div id="info"></div>
11		<div id="sns"></div>
12	</main>
13	<footer id="footer">
14	aiueo
15	</footer>
16</body>
17</html>

css
1#info {
2  padding: 50vh 0;
3  background: black;
4}
5#sns {
6  padding: 50vh 0;
7  background: red;
8}
9#footer {
10  background: green;
11  padding-top: 50vh;
12}

何卒よろしくお願いいたします。

行動規範の内容に同意します

回答3件

自己解決

お2人に協力いただいたおかげで、アンドロイドのみの現象というのがわかりました。
考えた結果、クリティカルなバグではないので対策不要としました。
改善するためにはpaddingにvhを使わなければ大丈夫。
しかしサイト構築によってはpaddingにvhを使いたい場合もあると思うので、トレードオフという感じでしょうか。
改めてお二方、協力いただき誠にありがとうございました。

投稿2021/05/31 06:22

dododo_ri

総合スコア0

最下部の「aiueo」がノックバックの結果見切れて表示されなくなります。

Android 10, Chrome 89.0.4389.105で再現しました。

AndroidのChromeって、上下にスクロールするとき、アドレスバーが出たり隠れたりしますよね。アドレスバーが隠れた状態でフリックすると再現しませんが、アドレスバーが見えた状態でフリックすると再現します。出てるか隠れてるかによって、「Viewportの高さ」の解釈が変わってるような印象を受けました(しかも一貫性が無い)。

おそらくアドレスバーが見えた状態の場合、アドレスバーの分を除いた高さを基準に50vhを算出してスクロール量(どれくらい下までスクロールできるか)を決めてるのではないでしょうか。その一方で、#footerの高さは、アドレスバー無しの状態のViewportを基準に決めてるみたいです。なので、スクロール量が不足しますね。

ちなみに、AmazonのFireタブレットのSilkブラウザも、アドレスバーが見え隠れする仕様なのですが、この現象は発生しませんでした。

投稿2021/05/18 11:36

gpsoft

総合スコア1323

dododo_ri

2021/05/18 13:38

検証いただきありがとうございます。アンドロイドのほかの実機、またブラウザバージョンでも発生することがgpsoft様のおかげで分かりましたので、サイト構築では対策した方がいいと判断できました。なるほど。試してみたところ確かにアドレスバーの表示非表示に注目すると発生確率が上がりました。アドレスバーの開閉で起こるなら、vhよりむしろ%で発生しそうなのにと思っていましたが、ビューポートの解釈の違い、と考えたら、なるほどと。同時に対策が難しそうですね。そういえばamazonタブを所持していたことを思い出し、同じくsilkブラウザで試してみたところこちらでは発生しました。バージョンによるのかもしれません。 FireOS7.3.1.9 silkブラウザ-v90.1.83.4430.91.10

行動規範の内容に同意します

iOS14.4 ですが、バウンススクロールを確認しました。

[CSS] macOS Chromeで領域外のバウンススクロールを無効化させる方法

overscroll-behavior - CSS: カスケーディングスタイルシート | MDN

投稿2021/05/18 08:49

Lhankor_Mhy

総合スコア36074

dododo_ri

2021/05/18 08:54

お忙しい中検証いただきありがとうございます。バウンススクロールということは滑らかに跳ね返るような動作、ということでしょうか。（ツイッターを上にスワイプした際のような）

Lhankor_Mhy

2021/05/18 08:59

こういうのです。合っていますか？ https://qiita.com/bgn_nakazato/items/9399937fdf4059f9f9d7

dododo_ri

2021/05/18 09:07

参考動画まで紹介いただきありがとうございます。アンドロイドの場合はアニメーションも一切なくただガクンと上に戻る（サンプルサイトでいうとaiueoが見切れる）ので動きが違いますね。アイフォンの方はどうやら問題なさそうですね。何度も申し訳ないのですが、これは先ほど追記2に追加したサンプル2の%指定の場合でも同様でしょうか？お手すきの際にでも確認いただければ嬉しいです

Lhankor_Mhy

2021/05/18 09:23

「aiueoが見切れる」という現象はどちらのサンプルでも起きませんでしたが、バウンススクロールはどちらのサンプルでも確認できました。

dododo_ri

2021/05/18 09:27

ご確認いただきありがとうございました。そうですか…。ということは少なくともios14.4では発生せず、おおよそアンドロイド固有の問題、といえそうです。協力いただき誠にありがとうございました

行動規範の内容に同意します

あなたの回答