Білий пробіл відображається на правій частині сторінки, коли фонове зображення повинно подовжувати повну довжину сторінки [закрито]

Наші фонові зображення веб-сторінок мають проблеми в FireFox, а також Safari в iOS на iPad / iPhone з білим пробілом у правій частині сторінки.

Фонові зображення прекрасно поширюються на інші веб-переглядачі, але у нас виникають труднощі не розширювати повну довжину веб-переглядача в цих браузерах.

Погляньте на наш сайт на FireFox, щоб побачити, що я маю на увазі.

Я додав:

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

у ваш CSS в самому верху над іншими класами, і, здавалося, виправити свою проблему.

Ваш оновлений .css файл доступний тут

Налагоджуйте свій CSS для елементів Ghost 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» викликала проблему.

Дослідивши деякі корисні стратегії, що тут представлені, я виявив, що мені потрібно лише додати специфічний CSS для iOS (я помістив його в нижній частині мого основного css аркуша.) Схоже, приховування переповнення-x було відповіддю для мене. Я припускаю, що визначення ширини на 100% допомагає в тому випадку, якщо мій вміст виходить ширшим. Слід зазначити, що у мене виникло це питання лише в iOS. Якщо він також є у Firefox, просто html та body body повинні бути використані, оскільки @media спеціально орієнтована на мобільні пристрої.

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

}

Будь ласка, хіп мені, якщо це комусь здається неправильним :)

Це досить старе питання, але я подумав, що я додам свої 2 копійки. Я спробував вищевказані рішення, включаючи css ghost, які я, безумовно, заощаджую для подальшого використання. Але жодне з них не працювало в моїй ситуації. Ось як я вирішив свою проблему. Сподіваємось, це допоможе комусь іншому.

Відкрийте інспектор (або все, що завгодно) та, починаючи з першого діла в тезі тіла, додайте display: none;до цього елемента. Якщо смуга прокрутки зникає, ви знаєте, що елемент містить елемент, який викликає проблему. Потім видаліть перше правило css і опустіться на один рівень в елемент, що містить. Додайте css до цього div, і якщо смуга прокрутки відійде, ви знаєте, що елемент або викликає, або містить елемент, що порушує. Якщо додавання CSS нічого не робить, ви знаєте, що причину проблеми викликав не той div, а інший div в контейнері викликає його, або сам контейнер його викликає.

Для деяких це може бути занадто багато часу. Пощастило, моє питання було в заголовку, але я можу уявити, що це займе трохи часу, якщо ваше питання було сказано, у нижньому колонтитулі чи щось.

overflow-x: hidden; працює ідеально для мене.

Проблема полягає у файлі:

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 це проблема, яка викликає перший рядок.

У мене також був такий самий випуск ( фонове зображення веб-сайту, що надає право біле поле в iPhone Safari ), і я виявив, що додавання фонового зображення до <html>тегу вирішило проблему.

До цього

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

Після

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

Мабуть, (-o-min-співвідношення пристрою-пікселів: 3/2) викликає проблеми. На моєму тестовому сайті це спричинило відсікання правої сторони. Я знайшов вирішення проблеми на Github, яка працює зараз. Використання (-o-min-device-pixel ratio: ~ "3/2"), здається, працює нормально.

Я бачу, що на це питання відповіли загальний стандарт, але коли я переглянув ваш сайт, я помітив, що все ще є горизонтальна смуга прокрутки. Я також помічаю причину цього: Ви використовували код:

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

який використовується поряд із кодом, який стверджує, що елемент має ширину 100%, викликаючи елемент загальною шириною 112% розміру екрана. Щоб виправити це, або видаліть прокладку, замініть прокладку з запасом 12% для того ж ефекту або змініть ширину (або максимальну ширину) елемента на 88%. Це відбувається у main.css у рядку 343. Сподіваюся, це допомагає!

У мене було те саме питання, тому спробував кілька речей. Одне з яких, здавалося, працює для мене - видалення ширини та додавання поплавця до тегу body.

Може працювати не для всіх примірників, але в сценарії, який я нещодавно мав, приховування переповнення елементів вмісту було бездоганним ...

Я відчував білу лінію праворуч на своєму iPad, а також у горизонтальному положенні. Я використовував div з фіксованою позицією з фоном, встановленим у ширину 960px та z-індексом -999. Цей конкретний div відображається лише на iPad через медіа-запит. Потім вміст помістили в обгортку з розширенням 960 пікселів. Відповіді на цій сторінці не допомогли в моєму випадку. Щоб виправити проблему з білою смугою, я змінив ширину обгортки вмісту на 958 пікс. Войла. Більше не біла права біла смуга на iPad у горизонтальному положенні.

Це питання довгий час зависало, але жоден з виправлень, які я міг знайти, не працював на мене (маючи ту ж проблему, що і в ipad), але мені вдалося вирішити власне рішення, яке повинно працювати для більшості людей, які я собі уявляю.

Ось мій код:

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

Насолоджуйтесь!