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

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

ただいまの
回答率

90.49%

  • HTML

    8999questions

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

  • Safari

    165questions

    SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

iOS Safariにて、inputタグにフォーカスしたときにページ最下部にできてしまう余白をなくしたい

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 277

fruitmachine

score 20

表題のとおりですが、iOS Safariにて、inputタグにフォーカスし、キーボードが表示されているとき
画像のようにページ最下部、htmlタグの下に余白ができてしまいます。

イメージ説明

body {
  background: url('image/hoge.jpg') #ff6;
}

背景色は反映されるのですが、背景画像をこの余白分埋めることは可能でしょうか。
可能であればCSSで、できなければjsでも良いです。
こちらで確認しているバージョンは、iOS 10, 11です。

以下は試しましたが、だめでした。

body {
  background-size: cover: //意味なし
  background-size: 100% 100%: //意味なし
}

余白自体は、GoogleやYahooでも同じようにでてしまうので、なくすことはできなさそうと思っています。
よろしくおねがいします。

 追記

キーボードとともに、アドレスバーが表示されていることも余白が出現する条件のようです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

.body {
  backgound: url('image/hoge.jpg') #ff6;
  background-size: cover; /*追加*/
}


これやってみても駄目でしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 15:55

    はい、ダメでした...

    キャンセル

  • 2018/07/26 16:02

    そうですか。。
    ならば input[type="text" ] { margin-bottom: 0 !important; }とか?
    (※セレクタは問題のフォームを確実に選択できるものに変更してみてください。)

    キャンセル

  • 2018/07/26 16:03

    あ、上記のコードに body {padding-bottom: 20px; }とか、なんか適当に余白いれてみるのも合わせてやってみてもらえます?

    キャンセル

  • 2018/07/26 16:31

    paddingやmarginをいじっても、余白は消えません。。
    http://mimhhs.moo.jp/test.html
    こちらにサンプルのコードをあげましたので、お時間有りましたらデベロッパーツールなどで触ってみてください。

    キャンセル

  • 2018/07/26 16:36

    効果あるかわからないですが、
    1.1行目に<!DOCTYPE html>を入れる
    2.input要素のfont-sizeを16px以上に設定する
    の2つを試してみてもらえますか?

    キャンセル

  • 2018/07/26 16:41

    効果なしです。。

    キャンセル

  • 2018/07/26 16:42

    むぅ、そうですか。。。
    手強いですね。
    どなたか猛者が現れると良いのですが。

    キャンセル

  • 2018/07/26 16:51

    不可能な気がするので、現在Appleに問い合わせています。。

    キャンセル

  • 2018/07/26 16:55

    そうですね、inputにフォーカスした状態で下に現れる余白は、
    諸々の挙動からして通常のCSSのコントロール範囲外にあるように思えますね…。
    Appleからの返答で理由がわかったら是非お知らせください。

    キャンセル

  • 2018/07/26 17:21

    当方
    ・iphone7
    ・iOSは最新版
    で提示されたサイトを確認したところ、ご質問のような余白はなく、普通に背景が表示されました。

    そして、提示されている画像とサイトの画面にかなり差異があったので、できれば全く同じソースにしていただけると現象の確認がしやすいと思います。

    特定のバージョンで起きるという可能性も捨てきれませんが。。。

    キャンセル

  • 2018/07/26 17:26

    只今、スクリーンショットを撮ったときと同じ状態にしました。ご確認ください。

    キャンセル

  • 2018/07/26 17:35

    ありがとうございます、確認できました。
    inputがbodyの一番下に配置されているため、inputフォーカス時上移動した結果、表示範囲が画像の範囲<body>を超えてしまっていますね。
    回答に書いてみるのでやってみて下さい。

    キャンセル

0

<body>の大きさは変更できないので、jqueryでフォーカスイン/アウト時に20px動かすようにしてみました。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style type="text/css">
      body {
        margin: 0;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        justify-content: flex-end;
        background: url("https://www.photolibrary.jp/mhd5/img533/450-20170708173121221103.jpg") #ff8;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
        crossorigin="anonymous"></script>
  </head>
  <body>
    <input type="text" id="textbox">
  <script type="text/javascript">
    $('#textbox')
    .focusin(function(e) {
      $(this).css('margin-bottom', '20px');
    })
    .focusout(function(e) {
      $(this).css('margin-bottom', '');
    });
  </script>
  </body>
</html>

背景をはみ出させるとスクロールバーが出てしまうので、これでいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 18:53

    スクロールすると黄色の余白がでてしまうので、これではだめです。。
    追記しましたが、アドレスバーが表示されていることも条件のようです。
    Safariのバグのような気がしています。

    キャンセル

  • 2018/07/26 19:08

    黄色の余白が出ている部分はbodyの範囲外なので、設定している色を消しましょう。
    bodyにoverflow:hidden;を設定するとわかると思います。
    で、移動距離が少し足りないのでもう何pxか追加してください。
    この動作はバグではなく、テキスト入力時の予測変換領域を確保しているためなので、それに合わせて設計していくしかありません。
    teratailでもスクロールできる以上に引っ張ると余白が出ます。
    最下部にテキストボックスがある故に目立ちますが、正常な動作です。

    キャンセル

  • 2018/07/26 22:58

    Googleなどの他のサイトでも同じように余白が出ることは認識しています。
    Chromeでは起こらないため、Safariでのバグと表現しました。
    わかりやすいようにサンプルに黄色の背景を敷きましたが、私が実際にやりたいことは、
    背景色が見えてしまうことを防ぐことではなく、背景画像を余白分までうめることです。
    スクロールできる以上に引っ張れてしまうことが問題なのです。
    無理そうに思いましたが、何かしら方法がないものか、と思いこちらで質問させていただきました。

    キャンセル

  • 2018/07/27 09:18

    >Chromeでは起こらないため、Safariでのバグと表現しました。
    >スクロールできる以上に引っ張れてしまうことが問題なのです。
    再度になりますが、バグでも問題でもなく、Safariの仕様です。
    ブラウザ間での仕様の違いは多くあります。
    hoverの動作の違い、position:stickyの対応/非対応、ベンダープレフィックスによるcssの書き分けetc...
    大事なのはそのような仕様の違いになるべく左右されないページデザイン、設計を心掛ける事です。
    Safariではフォーカス時⇒入力時の予測変換が出るたびに変換領域のサイズに合わせて上下動すると見栄えが良くない為にフォーカス時に予測変換分の余裕を持たせてテキストボックスを表示させます。
    今回で言えばinput領域が画面の最下部にレイアウトされていますから、余白分=画面の範囲外であるため、HTMLやCSSでは対処のしようがありません。
    本来であれば今回の現象が起きないようにレイアウトの設計をしていくことが必要になります。
    それでも画面最下部にinputを配置したいのであれば、回答したようにフォーカスイン/アウトのタイミングで中の要素を余白が出ない場所まで上へ移動させる以外にありません。
    ただし、他の要素と重なり合う危険性やPCで見た場合は移動させると不自然な為、スマホのみ移動させるなど、色々面倒な事が出てくるため、おすすめはしません。
    日本のiphoneのシェア率を考えると「Safariがおかしい」というよりも「Safariで綺麗に見える」設計にシフトした方がよいと思います。

    キャンセル

  • 2018/07/27 10:56

    デザインについてはクライアントがいますので、シフトすることはできません。
    Safariの仕様なのであればそれはそれでそのようにクライアントに伝えられるので大丈夫です。

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • HTML

    8999questions

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

  • Safari

    165questions

    SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

  • トップ
  • HTMLに関する質問
  • iOS Safariにて、inputタグにフォーカスしたときにページ最下部にできてしまう余白をなくしたい