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

Odpowiedzi:

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

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