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

ших фоновых изображениях веб-страницы возникают проблемы в FireFox, а также в Safari для iOS на iPad / iPhone. В правой части страницы отображается пробел.

Фоновые изображения хорошо распространяются на другие браузеры, но у нас возникают трудности с расширением браузера на эти браузеры.

Возьмитепосмотрите наш сайт на FireFox чтобы понять, что я имею в виду.

 Lightningsoul16 нояб. 2016 г., 14:10
Если вы используете фреймворк, такой как начальная загрузка или фундамент, убедитесь, что теперь столбец является первым дочерним элементом тела, но вложен в другой элемент div, имеющий некоторый тип заполнения (small-12 f.e.).
 gumuruh14 мар. 2017 г., 17:58
ты решил это @Dave?
 Mike Gledhill10 июл. 2017 г., 12:17
Сумасшедший, не так ли? Спустя 6 лет iOS Safari все еще показывает эту проблему. Я перепробовал множество CSS-решений, но в итоге мне пришлось прибегнуть к использованию jQuery.stackoverflow.com/a/45009357/391605

Ответы на вопрос(12)

а также только в горизонтальном положении. Я использовал div с фиксированной позицией с фоном шириной 960 пикселей и z-индексом -999. Этот конкретный div отображается только на iPad из-за медиа-запроса. Затем содержимое помещалось в конверт div шириной 960 пикселей. Ответы, представленные на этой странице, не помогли в моем случае. Чтобы исправить проблему с белой полосой, я изменил ширину оболочки содержимого на 958 пикселей. Вуаля. Нет больше белой правой белой полосы на iPad в горизонтальном положении.

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 это первая строка, которая вызывает проблему.

overflow-x: hidden; отлично работает для меня

но я решил добавить свои 2 цента. Я пробовал вышеупомянутые решения, включая ghost css, который я обязательно сохраню для будущего использования. Но ничего из этого не сработало в моей ситуации. Вот как я исправил свою проблему. Надеюсь, это поможет кому-то еще.

Откройте инспектор (или по вашему желанию) и, начиная с первого тега div в теле тега, добавьтеdisplay: none; только к этому элементу. Если полоса прокрутки исчезает, вы знаете, что этот элемент содержит элемент, который вызывает проблему. Затем удалите первое правило css и спуститесь на один уровень в содержащий элемент. Добавьте CSS к этому div, и если полоса прокрутки исчезнет, ​​вы знаете, что этот элемент либо вызывает, либо содержит нарушающий элемент. Если добавление CSS ничего не делает, вы знаете, что это не тот div, который вызвал проблему, и либо другой div в контейнере вызывает его, либо сам контейнер вызывает его.

Это может быть слишком много времени для некоторых. К счастью для меня, моя проблема была в заголовке, но я могу себе представить, что это займет немного времени, если ваша проблема, скажем, в нижнем колонтитуле или что-то в этом роде.

 Bill21 нояб. 2014 г., 16:48
Этот метод помог мне найти ошибку, спасибо
 hatenine17 сент. 2015 г., 14:13
Да, или вы можете спуститься вниз, спрятав дивы высшего уровня один за другим, затем войти в них ... и так далее
 geerlingguy20 июн. 2016 г., 06:42
Это действительно единственный способ успешно решить проблему с корнем, когда у вас есть странные элементы, такие какheight: 0 или жеheight: 1, В моем случае я обнаружил, что причиной является ошибочный «невидимый» класс в ядре Drupal 7:drupal.org/node/2664214

но ни одно из исправлений, которые я смог найти, не сработало для меня (с той же проблемой с ipad), но я справился со своим собственным решением, которое должно работать для большинства людей, которых я представляю.

Вот мой код:

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

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

3/2) вызывает проблемы. На моем испытательном участке это приводило к обрезанию правой стороны. Я нашел обходной путьGitHub это работает на данный момент. Использование (-o-min-device-pixel-ratio: ~ "3/2"), кажется, работает нормально.

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

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

который используется вместе с кодом, утверждающим, что элемент имеет ширину 100%, в результате чего элемент имеет общую ширину 112% размера экрана. Чтобы исправить это, удалите отступы, замените отступы с полем 12% для того же эффекта или измените ширину (или максимальную ширину) элемента на 88%. Это происходит в main.css в строке 343. Надеюсь, это поможет!

Фон тела сайта отображает правый белый край в iPhone Safari ) и обнаружил, что добавление фонового изображения в<html> тег исправил проблему.

До

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

После

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

поэтому попробовал несколько вещей. Один из них, похоже, мне помог - убрав ширину и добавив float к тегу body.

Может не работать для всех экземпляров, но в сценарии, который у меня недавно был, скрытие переполнения элементов содержимого было бесполезным ...

 Garavani22 окт. 2016 г., 18:29
Мне пришлось установить html, body to width: 0, чтобы избавиться от элемента-призрака сверху в Firefox.

Я добавил:

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

в ваш CSS в самом верху над другими классами, и это, казалось, решило вашу проблему.

Ваш обновленный файл .css доступен здесь

 isurfbecause20 авг. 2012 г., 23:33
Спасибо, это работает как шарм. Мне всегда было интересно, как проехать на почти бесконечной полосе прокрутки. Не уверен, почему это не было отмечено как ответ.
 gleddy18 авг. 2011 г., 19:56
офигенно, это только что исправило ошибку, которая беспокоила меня некоторое время!
 Paul Mason11 июл. 2012 г., 20:28
У меня была проблема с прокруткой на Safari Iphone с этим кодом, он стал очень медленным. В конце концов я обнаружил, что это было сочетание высоты: 100% и overflow-x: скрытый, поэтому я удалил высоту: 100%, и это работает намного лучше.
 james14 июн. 2015 г., 04:22
С точки зрения @ JosephK, эта проблема часто возникает из-за неправильного использования объектов контейнера, строк и столбцов Bootstrap, которые используют отступы и отрицательные поля, чтобы полностью компенсировать друг друга, но ТОЛЬКО ПРИ ИСПОЛЬЗОВАНИИ надлежащим образом в унисон. Иначе это сломается! По моему опыту, это одна из наиболее распространенных причин этого пробела с правой стороны. Для BRILLIANT, визуальное объяснение контейнера, строки, столбца для Bootstrap, включая обсуждение этой и других проблем, прочитайте это (нет, я не писал это):helloerik.com/...
 JosephK01 авг. 2014 г., 18:58
Я обнаружил, что класс строки 'bootstrap' дает {margin-right: -15px}, который вызывал это на моей странице.

представленные здесь, я обнаружил, что мне нужно только добавить специфичный для iOS CSS (я поместил его внизу моего основного листа CSS). Похоже, что для меня ответом было скрытие overflow-x. Я предполагаю, что указание ширины в 100% помогает в том случае, если мой контент расширяется. Следует отметить, что у меня была эта проблема только в iOS. Если он также есть в Firefox, то, вероятно, следует использовать только html и 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;
  }

}

Пожалуйста, помогите мне, если это кому-то кажется неправильным :)

 CPlusPlus28 июн. 2013 г., 09:51
Работает как шарм!
 JasonDavis01 июн. 2013 г., 12:26
Это было единственное, что решило мою проблему
 geedubb15 окт. 2015 г., 12:12
Спасибо - лучшее решение для меня. Довольно ненавязчивый тоже
 Rob Gleeson10 нояб. 2015 г., 17:53
Это решает проблему и имеет смысл для мобильных пробелов
 Erik Rybalkin16 нояб. 2018 г., 11:07
После применения прокрутка на Safari iphone6s становится медленной. Мне не хватает дополнительного свойства для мобильного Safari, чтобы оно работало гладко?

Отладка вашего CSS для Ghost CSS Elements.

Используйте эту закладку для отладки вашего CSS:http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Или добавьте CSS непосредственно:

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

В моем случае проблема с кнопкой «Мне нравится» на Facebook.

 Luke02 нояб. 2015 г., 01:23
Это должен быть принятый ответ ИМО. Я держу пари, что большинство людей использовали 100vw как ширину чего-то и в результате получили эту ошибку. Простое сокрытие переполнения является неоптимальным решением.
 caroso122201 апр. 2016 г., 07:12
Это впечатляет, потратил 2 часа на то чертово белое пространство, это решило это.
 Josan Iracheta28 мая 2014 г., 01:48
это действительно пригодилось
 opdb22 мая 2015 г., 03:58
Гениальное решение! Это поможет вам найти корень проблемы и исправить ее правильно, и все, что для этого требуется, - это несколько строк CSS.
 Khpalwalk30 авг. 2016 г., 08:24
Ух ты, потратил много часов и нашел виновника с помощью всего лишь нескольких строк кода. Спасибо друг :)

Ваш ответ на вопрос