paddingにvh設定でスマホ時画面最下部でノックバックされる

製作 プログラム

最終更新日:2021/05/26

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

追記:2021/5/26

「paddingにvhを指定することでスマホ時画面最下部で上に戻る」バグについてteratailの方でいくつか解答いただき、どうやらこの現象はスマホの中でもアンドロイド固有の問題で、アイフォンでは起こらないコト。それからどうやらビューポートとアンドロイドの自動で開閉するアドレスバー(画面上部のやつ)が影響しているらしいことが分かりました。

ご協力いただきありがとうございます。

しかしながら原因が分かっても解決方法が分からず、とりあえずpaddingのheightにvhを指定しない、というのが解決というかこの現象を避ける対策になります。

ちなみにmarginで高さにvh指定をしても本現象は起りません。paddingのみの、そしてアンドロイドのみのバグ、ということです。

タイトルそのまんまなんですがHTMLでpaddingをvhで設定しているとき、スマホでこう勢いよく画面最下部までスクロールすると一番下でシャキッと止まらずに、グキッと何のアニメーションもなくちょっと上までノックバック、というか戻る現象。

なんで上に戻るのか不明。

ちなみにこの最下部へのスクロール時上にちょっと戻る現象は、paddingがvhの時だけ発生し、%やemでは発生しない。

「DEMO①vh使用版:」https://lab.dododori.com/game/teratail/index.html

「DEMO②%使用版:」https://lab.dododori.com/game/teratail/index.html

手元のアンドロイドでは上のvh使用版ではちょっと戻るんで最下部のaiueoっていう文字が見えなくなる、②のpaddingに%を設定した方は最下部でピッタリ止まる。

わかる人いらっしゃいましたら記事下部のMessageか同じ内容でteratailさんにも投稿しているのでそっちでも教えていただければ嬉しいです。

https://teratail.com/questions/338984

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: ココア20g / ハイチュウとかってさ / なぜ米と小麦を食べようと思ったのかの謎 /