Białe miejsce pojawia się po prawej stronie strony, gdy obraz tła powinien rozciągać się na całą długość strony [zamknięty]

110

Obrazy tła naszych stron internetowych mają problemy w FireFox, a także Safari w iOS na iPadach / iPhone'ach z białą przestrzenią widoczną po prawej stronie strony.

Obrazy tła są dobrze widoczne w innych przeglądarkach, ale mamy trudności z nie przedłużeniem pełnej długości przeglądarki w tych przeglądarkach.

Weź obejrzenia naszej strony w FireFox , aby zobaczyć, co mam na myśli.

html css

— Dave
źródło

Jeśli używasz framwork, takiego jak bootstrap lub Foundation, sprawdź, czy kolumna teraz jest pierwszym dzieckiem ciała, ale jest zagnieżdżona w innym elemencie div, który ma jakieś wypełnienie (small-12 fe).

— Lightningsoul

rozwiązałeś to @Dave?

— gumuruh

Szalone, prawda? 6 lat później iOS Safari nadal pokazuje ten problem. Próbowałem wielu rozwiązań CSS, ale ostatecznie musiałem uciekać się do korzystania z jQuery. stackoverflow.com/a/45009357/391605

— Mike Gledhill

266

Dodałem:

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

do CSS na samej górze, ponad innymi klasami i wydawało się, że rozwiązało to problem.

Twój zaktualizowany plik .css jest dostępny tutaj

— Rion Williams
źródło

4

super, to właśnie naprawiło błąd, który dręczył mnie od jakiegoś czasu!

— gleddy

22

Miałem problem z przewijaniem na Safari iPhone'a z tym kodem, zrobiło się bardzo wolno. Ostatecznie stwierdziłem, że to kombinacja wysokości: 100% i overflow-x: ukryta, więc usunąłem wysokość: 100% i działa znacznie lepiej.

— Paul Mason,

Dzięki temu zadziałało jak urok. Zawsze zastanawiałem się, jak uzyskać jazdę po prawie nieskończonym pasku przewijania. Nie wiem, dlaczego nie zostało to oznaczone jako odpowiedź.

— isurf ponieważ

5

Zauważyłem, że klasa „row” programu bootstrap dawała {margin-right: -15px}, co powodowało to na mojej stronie.

— JosephK

2

Zgodnie z @ JosephK, ten problem często wynika z niewłaściwego użycia kontenerów, wierszy i kolumn Bootstrapa, które używają dopełnienia i marginesów ujemnych, aby doskonale się wzajemnie kompensować, ale TYLKO GDY UŻYWANE są prawidłowo w unisono. W przeciwnym razie pęknie! Z mojego doświadczenia wynika, że jest to jedna z najczęstszych przyczyn tej białej przestrzeni po prawej stronie. Aby uzyskać BRILLIANT, wizualne wyjaśnienie kontenera, wiersza, kolumny dla Bootstrap, w tym omówienie tego i innych problemów, przeczytaj to (nie, nie napisałem tego): helloerik.com/ ...

— james

133

Debuguj swój CSS pod kątem elementów Ghost CSS.

Użyj tej zakładki do debugowania CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Lub dodaj CSS bezpośrednio samodzielnie:

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

W moim przypadku problem spowodował przycisk „Lubię to” na Facebooku.

— optimiertes
źródło

1

to naprawdę się przydało

— Josan Iracheta

6

Genialne rozwiązanie! Pomoże Ci to znaleźć źródło problemu i poprawnie go naprawić, a wszystko, czego wymaga, to kilka wierszy css.

— opdb

3

To powinna być akceptowana odpowiedź IMO. Założę się, że większość ludzi użyła 100vw jako szerokości czegoś i otrzymała ten błąd. Proste ukrycie przelewu jest rozwiązaniem nieoptymalnym.

— Łukasz

To imponujące, spędziłem 2 godziny na tej cholernej białej przestrzeni, to rozwiązało problem.

— Carlos Roso

Wow, spędziłem wiele godzin i znalazłem winowajcę za pomocą zaledwie kilku linijek kodu. Dzięki kolego :)

— Khpalwalk

55

Po zapoznaniu się z niektórymi pomocnymi strategiami przedstawionymi tutaj stwierdziłem, że potrzebuję tylko dodać CSS specyficzny dla iOS (umieściłem go na dole mojego głównego arkusza css). Wygląda na to, że ukrycie overflow-x było dla mnie odpowiedzią. Zakładam, że podanie szerokości na 100% pomaga w przypadku, gdy moja treść jest szeroka. Należy zauważyć, że miałem ten problem tylko w iOS. Jeśli jest również w przeglądarce Firefox, prawdopodobnie należy użyć tylko bloku html i body, ponieważ @media jest specjalnie skierowana do urządzeń mobilnych.

@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;
  }

}

Proszę, zahipnotyzuj mnie, jeśli komuś wydaje się to niewłaściwe

— Jon Ryser
źródło

5

To była jedyna rzecz, która rozwiązała mój problem

— JasonDavis

1

Dzięki - najlepsze rozwiązanie dla mnie. Dość

— skromny

To rozwiązuje problem i ma sens w przypadku mobilnych białych przestrzeni

— Rob Gleeson,

Po zastosowaniu przewijanie w Safari iPhone6s staje się opóźnione. Czy brakuje mi dodatkowej właściwości mobilnej przeglądarki Safari, aby działała płynnie?

— Erik Rybalkin

najlepsza odpowiedź dla mnie !!

— Youssef Boudaya

28

To dość stare pytanie, ale pomyślałem, że dodam moje 2 centy. Wypróbowałem powyższe rozwiązania, w tym ghost css, które na pewno zachowam do wykorzystania w przyszłości. Ale żaden z nich nie zadziałał w mojej sytuacji. Oto, jak rozwiązałem problem. Mam nadzieję, że pomoże to komuś innemu.

Otwórz inspektora (lub cokolwiek chcesz) i zaczynając od pierwszego elementu div w tagu body, dodaj display: none;tylko ten element. Jeśli pasek przewijania znika, wiesz, że element zawiera element, który powoduje problem. Następnie usuń pierwszą regułę CSS i zejdź o jeden poziom niżej do elementu zawierającego. Dodaj css do tego elementu div, a jeśli pasek przewijania zniknie, wiesz, że element powoduje lub zawiera element naruszający. Jeśli dodanie kodu CSS nic nie da, wiesz, że to nie ten element div spowodował problem, a powoduje go inny element div w kontenerze lub sam kontener.

Dla niektórych może to być zbyt czasochłonne. Na szczęście dla mnie, mój problem był w nagłówku, ale mogę sobie wyobrazić, że zajmuje to trochę czasu, jeśli twój problem był, powiedzmy, w stopce lub coś w tym rodzaju.

— łącznik
źródło

Ta metoda pomogła mi znaleźć błąd, dzięki

— Bill

Tak, albo możesz zejść na dół, ukrywając po kolei elementy div z najwyższego poziomu, a następnie wejść do nich… i tak dalej

— hatenine

To naprawdę jedyny sposób na pomyślne naprawienie problemu z rootem, gdy masz dziwne elementy, takie jak te z height: 0lub height: 1. W moim przypadku przyczyną była błędna 'niewidzialna' klasa w rdzeniu Drupal 7: drupal.org/node/2664214

— geerlingguy

10

overflow-x: hidden; działa idealnie dla mnie.

— Hom
źródło

5

Problem tkwi w pliku:

style.css - linia 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;
}

usuń linie:

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

Zasadniczo daje to gradient cienia tylko do stopki. W przeglądarce Firefox jest to pierwsza linia, która powoduje problem.

— DMin
źródło

2

Miałem również ten sam problem ( tło treści witryny renderowało prawy biały margines w przeglądarce iPhone Safari ) i stwierdziłem, że dodanie obrazu tła do <html>tagu rozwiązało problem.

Przed

body {background:url('images/back.jpg');}

Po

html, body {background:url('images/back.jpg');}

— Xavi Esteve
źródło

2

Najwyraźniej (-o-min-współczynnik-piksel-urządzenia: 3/2) powoduje problemy. Na mojej stronie testowej powodowało to obcięcie prawej strony. Znalazłem obejście na githubie, które na razie działa. Wydaje się, że użycie parametru (-o-min-device-pixel ratio: ~ "3/2") działa dobrze.

— Lu R.
źródło

2

Widzę, że odpowiedź na pytanie jest ogólna, ale kiedy spojrzałem na twoją witrynę, zauważyłem, że nadal jest na niej poziomy pasek przewijania. Zauważyłem też powód tego: użyłeś kodu:

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

który jest używany wraz z kodem stwierdzającym, że element ma szerokość 100%, powodując powstanie elementu o łącznej szerokości 112% rozmiaru ekranu. Aby to naprawić, usuń wypełnienie, zastąp je marginesem 12%, aby uzyskać ten sam efekt, lub zmień szerokość (lub maksymalną szerokość) elementu na 88%. Dzieje się to w main.css w linii 343. Mam nadzieję, że to pomoże!

— HippoRustler
źródło

Lub ustaw box-sizingwłaściwość na border-box.

— Benpai

2

Miałem ten sam problem, więc wypróbowałem kilka rzeczy. Jeden z nich wydawał się działać dla mnie - usunięcie szerokości i dodanie pływaka do tagu body.

Może nie działać dla wszystkich instancji, ale w scenariuszu, który miałem ostatnio, ukrywanie przepełnienia elementów treści nie było możliwe ...

— luminancedesign
źródło

Musiałem ustawić html, body na width: 0, aby pozbyć się elementu ghost na górze w Firefoksie.

— Garavani

1

Widziałem białą linię po prawej stronie na moim iPadzie, a także tylko w pozycji poziomej. Używałem elementu div o stałej pozycji z tłem ustawionym na szerokość 960 pikseli i indeks z -999. Ten konkretny element div pojawia się tylko na iPadzie z powodu zapytania o media. Treść została następnie umieszczona w opakowaniu div o szerokości 960 pikseli. Odpowiedzi udzielone na tej stronie nie pomogły w moim przypadku. Aby naprawić problem z białym paskiem, zmieniłem szerokość opakowania zawartości na 958 pikseli. Voilá. Koniec z białym prawym białym paskiem na iPadzie w pozycji poziomej.

— modern4life
źródło

1

To pytanie kręciło się od jakiegoś czasu, ale żadna z poprawek, które mogłem znaleźć, nie działała dla mnie (mając ten sam problem z iPadem), ale udało mi się znaleźć własne rozwiązanie, które powinno działać dla większości ludzi, których sobie wyobrażam.

Oto mój kod:

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

Cieszyć się!

— Michael
źródło