Фон веб-сайта веб-рендеринга справа на белом фоне в iPhone Safari

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

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

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

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

ИЗМЕНИТЬ

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

Еще один вопрос: Пробел, появляющийся на правой стороне страницы, когда фоновое изображение должно распространяться на всю длину страницы Предлагаемое применение overflow-x:hidden, но оно посещает веб-сайт.
В форуме 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');}

После

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

Ответ 1

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

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

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

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

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

Дополнительная информация на Документах разработчика Apple.

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

Установите размер фона на 100% и положение фона вверху слева. Он будет работать нормально:

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`

Ответ 5

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

Здесь мой код:

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

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