質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

dododo_ri
dododo_ri

総合スコア0

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

3回答

0グッド

0クリップ

1551閲覧

投稿2021/05/18 08:25

編集2021/05/18 09:25

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

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}

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

0

自己解決

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

投稿2021/05/31 06:22

dododo_ri

総合スコア0

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

0

投稿2021/05/18 08:49

Lhankor_Mhy

総合スコア33631

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

dododo_ri

2021/05/18 08:54

お忙しい中検証いただきありがとうございます。 バウンススクロールということは滑らかに跳ね返るような動作、ということでしょうか。(ツイッターを上にスワイプした際のような)
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では発生せず、おおよそアンドロイド固有の問題、といえそうです。協力いただき誠にありがとうございました

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。