モバイルでスクロールすると、CSSフルスクリーンの背景の下部にホワイトバーが表示されます

Dec 07 2020

フルスクリーンの背景画像のあるウェブサイトがあります。

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

このコードはほとんどのデバイスで正常に機能しますが、一部の古いAndroidデバイスでは、下にスクロールすると問題が発生します。部分的に下にスクロールしますが、指を離さないと、同時に消えるURLバーと同じサイズの白いバーが表示されます。指を離すと、背景が自動的に修正されます。

これは、画像がスクロールの途中でどのように見えるかです。

背景が常にページを埋めていることを確認する方法はありますか？

編集：私はこれらのプロパティでdivを追加しようとしました：

#background {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
}

これは背景を示していますが、同じ問題が発生します。

回答

AHaworth Dec 07 2020 at 04:44

IOS以降のAndroidデバイスでは、vhが修正され、100vhが常に最小のトップバーの下部と画面の下部の間の高さになるようになりました。

古いデバイスではそうではなかったため、ユーザーがスクロールしてブラウザのトップバーの一部を削除すると、vhが変化します。

この修正は、表示されている現象と、スクロール時に要素のサイズが「ジャンプ」する可能性を防ぐために導入されました。これにより、ユーザーが最初にページにアクセスしたときにすべての背景が表示されないという別の問題が発生しました。

あなたの場合、これはあなたの画像の下部にある距離の無地のために目立たないです。下部にテキストがあるかどうかは重要です。

絶対に配置された要素、または同じ背景を持つが100vhプラスビットの疑似要素を使用することで、問題を回避できる可能性があります。これはうまくいくかもしれません、すなわち。画像の性質を考えると、目に見える結合が得られます。

しかし、一般的な解決策ではありませんが、私は理解しています。

localHacker Dec 07 2020 at 05:25

疑似要素を使用してみることができます。少し手間がかかるかもしれませんが、問題が修正される可能性があります。

html, body {
height: 100vh;
width: 100vw;
position: relative;
z-index: 2;
}

body::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url('/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;
}

JosueMurhabazi Dec 12 2020 at 21:52

これを試して。それはあなたの背景が常にページを埋めるようにします

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;

  position: absolute;
}

Paul Dec 15 2020 at 17:05

メインアプリの背景を黒に設定し、背景写真を小さな黒のストライプにブレンドして拡張するとどうなりますか？これはAndroidのバグ/機能のように聞こえます。

MohamadNateqi Dec 16 2020 at 20:49

これを試しましたか：

html {
   min-height: 100vh;
}

これは、以下のリンクの質問で提案されています。これは、問題に類似しているようです。

https://stackoverflow.com/a/47372972/6119844

myjobistobehappy Dec 11 2020 at 12:24

どうしたらいいかわからなかったので調べてみました。Safariすべてのウェブサイトでこれを行う傾向がありますが、あなたのケースのためにそれを修正することができるかもしれません。私はそれを修正する方法についていくつかの同様の質問を見つけましたStack Overflow。以下にいくつかの解決策を紹介します。

背景にスクロールクラスを追加する

html,
body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}
.scroll {
 overflow: auto;
 height: 100%;
}

オーバーフロースクロールを防ぐ

html,
body {
 -webkit-overflow-scrolling: auto;
}

iNoBounceライブラリの使用

このライブラリはここにあります。他の方法が機能しない場合は、これが最後の手段になるはずです。所有者は2018年以降、新しいアップデートをリリースしていませんが、今のところ、私のテストでは機能しています。ハッピーコーディング:)

AliAnsari Dec 17 2020 at 19:58

これを試してください：420は一般的なモバイル画面サイズです。??? 要素の高さに基づいています

@media screen and (max-width: 420px) {
  .sampleCSSclass {
    height: calc(100vh - ????px);
  }
}

Author Dec 17 2020 at 22:08

スクロールバーがまったく使用されていない場合は、本体に非表示のoveflowを追加でき、オーバーフローは表示されません。マージンとパディングを0に設定してみてください

Dingus45191 Dec 17 2020 at 23:22

それはheight: 100vh;あなたが身長を上げる必要があるからです。多分あなたは試してみるheight:100%か試してみるべきですmin-height: 100vh;