Фон тела сайта отображает правый белый край в iPhone Safari - PullRequest
Новая
       1

Фон тела сайта отображает правый белый край в iPhone Safari

15 голосов
/ 27 апреля 2011

У меня есть ошибка рендеринга на этом сайте, которую я больше нигде не видел. Веб-сайт отображается во всех современных браузерах и хорошо работает, хотя я не могу понять, почему он не отображает полное фоновое изображение (см. Скриншоты ниже). Я использую Yahoo CSS Reset и фоновое изображение объявляется в теле следующим образом: 

background: url("back.jpg") #033049;

Вы также можете посетить веб-сайт: http://xaviesteve.com/

enter image description here

enter image description here

Дайте мне знать, если я предоставлю более подробную информацию. Любая помощь / подсказка приветствуется, спасибо.

EDIT

Я нашел очень мало людей, сообщающих об этой проблеме в Интернете:

  1. Другой вопрос SO: На правой стороне страницы появляются пробелы, когда фоновое изображение должно расширяться на всю длину страницы Рекомендуется применять overflow-x:hidden, но это обрезает веб-сайт.

  2. На форуме iPad: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html Нет ответов

РЕШЕНИЕ

Я исследовал и пробовал разные способы решения этой проблемы и обнаружил, что добавление фонового изображения к тегу <html> решило проблему. Надеюсь, это сэкономит время другим разработчикам.

До 

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

* После 1049 *

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

Ответы [ 5 ]

22 голосов
/ 27 апреля 2011

Перенос стиля в элемент html работает нормально, но есть и другие способы исправить это.

То, что здесь происходит, изначально - это размер элемента тела в соответствии с окном просмотра. Если ширина области просмотра составляет всего X пикселя, ваше тело будет иметь ширину X пикселей, даже если содержимое будет шире. Чтобы это исправить, присвойте body (или чему-либо, к чему вы прикрепляете фоновые стили) процентное width или min-width для вашего контента.

Вы действительно получаете ту же проблему в настольных браузерах, сужая окно браузера и прокручивая вправо. Эта проблема более заметна на iPhone / iPad, поскольку по умолчанию Mobile Safari устанавливает область просмотра на 980 пикселей, а затем уменьшает масштаб, пока весь ваш контент не помещается на экране.

Альтернативное решение, которое я бы не рекомендовал, поскольку оно работает только для Mobile Safari, - это установка ширины области просмотра самостоятельно с помощью: 

<meta name = "viewport" content = "width = 1080">

Больше информации на Документы Apple для разработчиков .

2 голосов
/ 10 июля 2012

Просто столкнулся с этой проблемой и исправил ее, установив весь контент, который использует width: 100%; также установить минимальную ширину, превышающую ширину вашего содержимого div. Для примера: 

.content_bg{width:100%; min-width:1080px;}

Я также исправил это на мобильных устройствах, используя медиа-запросы: для iPhone и iPad: 

/*ipad portrait*/    
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      body{width:1080px;}
    }

/*ipad landscape*/    
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      body{width:1080px;}
    }

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
        body{width:1080px;}
    }
1 голос
/ 04 августа 2013

Установите для background-size значение 100% и background-position для верхнего левого угла.Это будет нормально работать следующим образом: 

background-color: #336699;
background-image: url('whatever.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;`enter code here`
1 голос
/ 09 марта 2012

Ни одно из этих решений не решило мою проблему, но я нашел довольно простое.Просто установите background-size вашего контейнера bg, эквивалентный размерам изображения, например: 

body {
    background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */
    background-size: 1920px 3840px;
}

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

0 голосов
/ 19 апреля 2012

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

Вот мой код:

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

Надеюсь, это кому-нибудь поможет!

...