Background-Attachment: исправлено, не работает на iOS

Question

Я пытаюсь найти решение проблемы с фиксированными фонами на устройствах iOS. Я бы предпочел не перепроектировать все для этого сайта, и я надеюсь, что некоторые изменения CSS могут это исправить. Так выглядит сайт на iPhone, и так он и должен выглядеть. Код CSS, который я использую, выглядит следующим образом:

.container {
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
}

.fixed-background {
    height: 800px;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

Я также пытался использовать @media запрос, чтобы исправить это для iOS, используя некоторые сообщения на stackru, но это, похоже, не имеет никакого эффекта:

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    .fixed-background {
        background-attachment: scroll;
    }
} 

HTML

<div class="fixed-background bg-1">
    <div class="container">
        <div class="title">
            <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
            <h2>CONDOMINIUM MANAGEMENT</h2>
        </div>
    </div>
</div>

Answer 1

Я только что прошел ту же проблему, и вот как я ее решил.

Во-первых, вам нужно объявить, что ваше тело и HTML должны иметь ширину 100% и высоту 100%:

html, body{
 width: 100%;
 height: 100%;
}

Тогда прокрутка на вашей странице НЕ может быть выполнена телом: вы должны обернуть ее в контейнер. Для этого контейнера нужны три параметра: переполнение: прокрутка, ширина: 100% и высота: 100%. Я рекомендую обернуть в него весь сайт:

#wrapper{
  width: 100%;
  height: 100%;
  overflow: scroll;
 }

Если вам не нравится, как он прокручивается, вы также можете попробовать добавить -webkit-overflow-scrolling: touch.

Надеюсь, что это поможет вам / кому бы то ни было, ищущему это!

Answer 2

Я не уверен, поможет ли это. Я нашел общее решение для исправления фонового положения на iOS.

И это очень хорошо работает с последними iPad.

Не стесняйтесь копировать!

Сразу под тегом body добавьте

<div id="iPad"></div>

Затем стилизуйте это как:

      div#iPad { 
    position: sticky; 
    background: <your image + settings>; 
    top: 0; 
    margin: 0; 
    height: 100vh; 
    margin-top: -100vh; 
    z-index: -1 }

Размещаю на всех страницах своего сайта. Но вы можете увидеть его в действии на этой длинной музыкальной странице .

Оно работает!!

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

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

Answer 3

Ко всему моему div с фиксированным фоном я добавляю классы class="parallax iparaxify paraxify"И в моем основном файле CSS у меня есть:

.parallax {
width: 100%;
background url(../images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} 

И, наконец, сделайте это параллаксом для всего, кроме продуктов i

.paraxify {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

В конце деактивировать position:fixed для ipad, iphone и ipod с jquery

// adds mobile class, and mobile os to html tag
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();

if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$('.iparaxify').removeClass('paraxify');
}
});