У наших изображений веб-страниц возникают проблемы с FireFox, а также с Safari в iOS на iPads/iPhones с белым пространством, отображающимся в правой части страницы.
Фоновые изображения широко отображаются в других браузерах, но нам трудно не расширять всю длину браузера в этих браузерах.
Возьмите посмотреть наш сайт на FireFox, чтобы понять, что я имею в виду.
Я добавил:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
в ваш CSS на самом верхнем уровне над другими классами, и, похоже, он исправил вашу проблему.
Отладка вашего CSS для Ghost CSS Elements.
Используйте эту закладку для отладки вашего 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.
После изучения некоторых полезных стратегий, представленных здесь, я обнаружил, что мне нужно только добавить CSS для iOS (я положил его внизу моего основного листа css.) Кажется, что скрытие переполнения x было ответом для меня, Я полагаю, что указание ширины на 100% помогает в том, что мой контент становится шире. Следует отметить, что у меня была эта проблема только в iOS. Если это также в Firefox, вероятно, следует использовать только html и body block, поскольку @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, который я определенно буду экономить для будущего использования. Но никто из них не работал в моей ситуации. Вот как я исправил свою проблему. Надеюсь, это поможет кому-то другому.
Откройте инспектор (или независимо от вашего предпочтения) и начиная с первого div в теге body, добавьте display: none; только к этому элементу. Если полоса прокрутки исчезает, вы знаете, что элемент содержит элемент, вызывающий проблему. Затем удалите первое правило css и перейдите на один уровень в содержащийся элемент. Добавьте css в этот div, и если полоса прокрутки исчезнет, вы знаете, что элемент либо вызывает, либо содержит оскорбительный элемент. Если добавление CSS ничего не делает, вы знаете, что причиной этого является не тот 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-device-pixel-ratio: 3/2) вызывает проблемы. На моем тестовом сайте это привело к тому, что правая сторона была отрезана. Я нашел обходное решение github, которое работает сейчас. Использование (-o-min-device-pixel-ratio: ~ "3/2" ) похоже работает нормально.
Я вижу, что на вопрос был дан ответ на общий стандарт, но когда я посмотрел на ваш сайт, я заметил, что по-прежнему существует горизонтальная полоса прокрутки. Я также замечаю причину этого: Вы использовали код:
.homepageconference .container {
padding-left: 12%;
}
который используется вместе с кодом, указав, что элемент имеет ширину 100%, в результате чего элемент с общей шириной 112% от размера экрана. Чтобы исправить это, либо удалите прокладку, замените прокладку на 12% для того же эффекта, либо измените ширину (или максимальную ширину) элемента на 88%. Это происходит в main.css по строке 343. Надеюсь, это поможет!
У меня была такая же проблема, поэтому я попробовал несколько вещей. Один из них, казалось, работал у меня - удаление ширины и добавление поплавка в тег тела.
Может не работать для всех экземпляров, но в сценарии, который я недавно имел, скрывая переполнение элементов контента, не было...
Этот вопрос некоторое время зависал, но ни одно исправление, которое я мог найти, не работало для меня (с той же проблемой с ipad), но мне удалось создать собственное решение, которое должно работать для большинства людей, которые я себе представляю.
Здесь мой код:
html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}
Наслаждайтесь!
Я столкнулся с белой линией справа на своем iPad, но только в горизонтальном положении. Я использовал фиксированную позицию div с фоном, установленным в ширину 960px и z-index -999. Этот конкретный div появляется только на iPad из-за медиа-запроса. Содержимое затем помещалось в оболочку div шириной 960 пикселей. Ответы, представленные на этой странице, не помогли мне. Чтобы исправить проблему с белой полосой, я изменил ширину оболочки содержимого на 958 пикселей. Вуаля. В горизонтальном положении на iPad нет более белой правой белой полосы.