Исправлено фоновое изображение с ios7

У меня есть проект, который я использую фиксированное фоновое изображение. Он отлично работает на всех, кроме ios7. На ipad фоновое изображение будет увеличено и размыто. Вот код CSS, который я использую -

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

вот ссылка на живую страницу - www.wdeanmedical.com

Что мне не хватает?

ОТВЕТЫ

Ответ 1

Использование background-attachment: fixed с background-size: cover вызывает проблемы в большинстве мобильных браузеров (как вы видели). Вы можете попробовать использовать background-attachment: scroll. Это не даст желаемого эффекта, но вы увидите как минимум изображения. Вы можете использовать медиа-запрос или два, чтобы ограничить его устройствами, которые являются планшетами или телефонами, используя @media screen and (max-device-width: 1024px){}

ИЛИ

Вы можете использовать background-position: scroll и включить некоторый javascript, который сохранит изображение в прокрученной позиции (удерживая его в верхней части окна): DEMO

Ответ 2

У меня было очень простое решение для этого, после борьбы со всеми методами исправления этого.

у меня была проблема на моих мобильных устройствах IOS.

css (рабочий стол)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Затем я перезаписываю его медиа-запросом, удаляя "исправлено" как фоновое вложение.

CSS (мобильный)

/*-------- iPads (portrait and landscape) --------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - устанавливает для этого свойства значение по умолчанию. Я думаю, что из-за того, что IOS не принимает 'fixed', он возвращается к значению по умолчанию, которое принимает, scroll.

Это работало для меня на каждом устройстве. Надеюсь, это поможет кому-то еще.

Ответ 4

Знайте, что это старый поток, но хотел предоставить обновленное решение, основанное на решении от @Cruz-Nunez

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

Вместо этого вы можете проверить, есть ли у устройства возможности зависания, и если это не так, переопределите вот так:

@media (hover: none) {
   .homeHero {
       background-attachment: initial;
   }
}

Вы также можете проверить, есть ли у устройства указатель курса (например, палец) вместо тонкого (например, мыши):

@media (pointer: coarse) { ... }

Ответ 5

.header {background-position: -99999px -99999px;}
.header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;}

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

Ответ 6

Или вы можете просто поместить прозрачный div, который покрывает экран и использует переполнение: прокрутка. Просто ради этого вы можете переписать высоту div с javascript на screen.height.

#scrollbox {
	width: 100%;
	height: 100%;
	overflow: scroll;
	background: transparent;
}

Ответ 7

Объединение идей @brouxhaha и @yllama: используйте медиа-запрос для iOS, который находится в этом посте SO, чтобы установить

background-attachment: scroll;

Таким образом, фиксированное фоновое изображение появляется для мобильных устройств, не поддерживающих iOS, и всех других устройств.

.widget-wrap {
   background-attachment: fixed;
   ...
   ...
}

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}

Ответ 8

Как насчет этого? (я только заметил, что @mems уже предложил это)

    body {
      position: relative;
    }

    body:after {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      content: '';
      background-image: url(./img/YOUR_IMG.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #000;
      background-position: bottom right;
    }

Ответ 9

Используйте перспективу CSS вместо JS или фиксированный фоновый параллакс для лучшей производительности и совместимости устройства.

body, html { 
  margin: 0;
  padding:0;
}

.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('http://placeimg.com/640/480/any');
}

.content {
  height: 200vh;
  display: flex;
  justify-content: center;
  background: red;
}
<div class="wrapper">
  <div class="section parallax">
   <h1>Heading</h1>
  </div>
  <div class="content">
    <h1>Site Content</h1>
  </div>
</div>