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

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.

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

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.

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

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.

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

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.

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');}

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.

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!

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 ...

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.

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ę!