背景画像がページの全長にわたっている場合にページの右側に表示される空白[クローズド]

110

私たちのウェブページの背景画像は、iPad / iPhoneのFireFoxおよびiOSのSafariで問題があり、ページの右側に空白が表示されています。

他のブラウザでも背景画像は適切に拡張されますが、それらのブラウザではブラウザの全長を拡張できないので困っています。

テイクFireFoxの上の私たちのサイトを見て、私が何を意味するか見るために。

html  css 
— デイブ
ソース
ブートストラップやファンデーションのようなフレームワークを使用している場合は、列がボディの最初の子であるが、何らかのパディング（small-12 fe）を持つ別のdivにネストされていることを確認してください。
— Lightningsoul
@Daveで解決しましたか？
— gumuruh 2017年
クレイジーですよね。6年後、iOS Safariはまだこの問題を示しています。数多くのCSSソリューションを試しましたが、最終的にはjQueryを使用する必要がありました。 stackoverflow.com/a/45009357/391605
— Mike Gledhill

回答:

266

追加した：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

CSSを他のクラスの最上部に配置すると、問題が解決したようです。

更新された.cssファイルはこちらから入手できます

— リオン・ウィリアムス
ソース
4
すごい、それはしばらくの間私を悩ませてきた私のバグを修正しました！
— gleddy
22
このコードでサファリiphoneのスクロールに問題があり、非常に遅くなりました。最終的には、高さ：100％とオーバーフローx：の組み合わせであることがわかりました。そのため、高さ：100％を削除しました。
— ポールメイソン
おかげでこれは魅力のように働きました。ほとんど無限のスクロールバーに乗る方法を常に疑問に思っていました。これが回答としてマークされていない理由がわかりません。
— isurfbecause 2012
5
私は、ブートストラップの「行」クラスが{margin-right：-15px}を与えていて、これが私のページでこれを引き起こしていることがわかりました。
— JosephK 2014
2
@JosephKの要点として、この問題はしばしば、Bootstrapのコンテナー、行、および列オブジェクトの誤用から発生します。これらは、パディングと負のマージンを使用して互いに完全に相殺しますが、一致して正しく使用された場合のみです。そうでなければ壊れます！私の経験では、これは右側の空白の最も一般的な原因の1つです。この問題および他の問題の議論を含む容器、行、ブートストラップのためのカラムのBRILLIANT、視覚的な説明のために、これを（ない私はそれを書いていない）読み取りhelloerik.com/...
— ヤコブ
133

Ghost CSS要素のCSSをデバッグします。

このブックマークを使用してCSSをデバッグします：https : //blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

または、CSSを自分で直接追加します。

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

私の場合、Facebook Like Buttonが問題の原因です。

— 楽天
ソース
1
これは本当に
— 役に立ちました
6
素晴らしいソリューション！これは、問題の根本を見つけて正しく修正するのに役立ちます。必要なのは、数行のcssだけです。
— opdb 2015年
3
これは、受け入れられた回答IMOである必要があります。私の賭けは、ほとんどの人が何かの幅として100vwを使用し、結果としてこのバグを得たことです。単にオーバーフローを隠すことは次善の解決策です。
— ルーク
これは印象的で、あのゴッドミットのホワイトスペースに2時間費やして、これで解決しました。
— Carlos Roso
うわー、何時間も費やして、ほんの数行のコードで犯人を見つけました。ありがとうメイト:)
— Khpalwalk 2016
55

ここで提供されているいくつかの役立つ戦略を調べたところ、iOS固有のCSSを追加するだけでよいことがわかりました（メインのCSSシートの一番下に配置しました）。幅を100％にすると、コンテンツが広くなる場合に役立つと思います。iOSでのみこの問題が発生していたことに注意してください。Firefoxにもある場合は、@ mediaがモバイルデバイスをターゲットにしているため、おそらくhtmlおよびbodyブロックのみを使用する必要があります。

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

これが誰かに間違っていると思われる場合は、私にヒップをお願いします:)

— ジョン・ライザー
ソース
5
これが私の問題を解決した唯一のことでした
— JasonDavis
1
ありがとう-私にとって最善の修正。あまり
— 目立た
これは問題を解決し、モバイルのホワイトスペースに意味があります
— Rob Gleeson '10 / 11/15
適用後、Safari iphone6sでのスクロールが遅くなります。モバイルSafariをスムーズに動作させるための追加のプロパティがありませんか？
— エリックリバルキン
私にとって最良の答え！
— Youssef Boudaya
28

これはかなり古い質問ですが、2セント追加すると思いました。私はゴーストCSSを含む上記のソリューションを試しましたが、将来の使用のために確実に保存します。しかし、これらのどれも私の状況ではうまくいきませんでした。これが私の問題を修正する方法です。うまくいけば、これは他の誰かを助けるでしょう。

インスペクター（または任意の設定）を開き、bodyタグの最初のdivから始めて、display: none;その要素のみに追加します。スクロールバーが消えたら、問題の原因となっている要素が要素に含まれていることがわかります。次に、最初のcssルールを削除し、1つ下のレベルの要素に移動します。そのdivにcssを追加します。スクロールバーが消えると、要素が原因であるか、要素が問題の要素を含んでいることがわかります。CSSを追加しても何も起こらない場合、問題を引き起こしたのはそのdivではなく、コンテナー内の別のdivが原因であるか、コンテナー自体が原因です。

これには、時間がかかりすぎる場合があります。私にとって幸運なことに、私の問題はヘッダーにありましたが、問題がフッターまたは何かであると言われた場合、これには少し時間がかかることを想像できます。

— ハイフン
ソース
この方法は、バグのおかげでバグを見つけるのに役立ちました
— Bill
うん、またはそれらの内側に行く、その後、一つずつ、最高レベルのdivをhidding DOMを下ることができます...というように
— hatenine
これは、height: 0またはのような奇妙な要素がある場合に根本的な問題を正常に解決する唯一の方法height: 1です。私の場合、原因はDrupal 7コアの誤った「見えない」クラスであることがわかりました：drupal.org/node/2664214
— geerlingguy
5

問題はファイルにあります：

style.css-721行目

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

行を削除します。

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;

これは基本的にフッターにのみ影のグラデーションを与えます。Firefoxでは、これが問題の原因となっている最初の行です。

— DMin
ソース
2

（-o-min-device-pixel-ratio：3/2）が問題を引き起こしているようです。私のテストサイトでは、右側が切断されていました。今のところ動作するgithubの回避策を見つけました。Using（-o-min-device-pixel-ratio：〜 "3/2"）は正常に動作するようです。

— ルー・R
ソース
2

質問は一般的な基準に答えているようですが、サイトを見ると、まだ水平スクロールバーがあることに気づきました。私はこれの理由にも気づきました：あなたはコードを使いました：

.homepageconference .container {
padding-left: 12%;
}

これは、要素の幅が100％であり、要素の合計サイズが画面サイズの112％であることを示すコードと一緒に使用されています。これを修正するには、パディングを削除するか、パディングを12％のマージンに置き換えて同じ効果を得るか、要素の幅（または最大幅）を88％に変更します。これは、main.cssの343行目で発生します。

— HippoRustler
ソース
または、box-sizingプロパティをに設定しますborder-box。
— ベンパイ
2

同じ問題があったので、いくつか試してみました。そのうちの1つは私にはうまくいくように見えました-幅を削除して、bodyタグにフロートを追加しました。

すべてのインスタンスで機能するわけではありませんが、最近のシナリオでは、コンテンツ要素のオーバーフローを非表示にすることはできません...

— 輝度設計
ソース
Firefoxの上部にあるゴースト要素を取り除くために、html、bodyをwidth：0に設定する必要がありました。
— Garavani
1

iPadの右側にある白い線だけでなく、横向きの位置でも発生していました。私は、背景が幅9​​60pxに設定され、z-indexが-999の固定位置divを使用していました。この特定のdivは、メディアクエリが原因でiPadにのみ表示されます。次に、コンテンツは960px幅のdivラッパーに配置されました。このページで提供されている回答は、私の場合は役に立ちませんでした。白のストライプの問題を修正するために、コンテンツラッパーの幅を958pxに変更しました。ボイラ。iPadの水平位置に白い右の白い縞がなくなりました。

— モダン4ライフ
ソース
1

この質問はしばらくの間出回っていますが、私が見つけた修正はどれも機能しませんでした（iPadで同じ問題があります）が、私が想像するほとんどの人に役立つはずの独自のソリューションを管理しました。

これが私のコードです：

html {
   background: url("../images/blahblah.jpg") repeat-y;
   min-width: 100%;
   background-size: contain;
}

楽しい！

— マイケル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.