Background-Attachment: Fixed Is not Work On iOS

Я пытаюсь найти решение проблемы, с которой я сталкиваюсь, с фиксированным фоном на устройствах iOS. Я бы предпочел не перепроектировать все для этого веб-сайта, и я надеюсь, что некоторые изменения CSS могут его исправить. This - это то, как выглядит сайт на iPhone, а this - это то, на что он должен выглядеть. Код CSS Я использую выглядят следующим образом:Background-Attachment: Fixed Is not Work On iOS

.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 запроса, чтобы исправить его прошивку с помощью некоторых постов на StackOverflow, но это, похоже, не имеет никакого эффекта:

@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>

источник

2017-01-03 Jordan U.

Вы пробовали это http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios – Shashi

После некоторых дебатов я просто использовал позицию: прокрутка для мобильного телефона CSS. Спасибо за информацию. –

Я думаю, что это отвечает на ваш вопрос: http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483 –

Я только что прошел через тот же самый вопрос, и это, как я решил.

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

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

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

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

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

Надеюсь, что это поможет вам/любому, кто придет в поисках этого!

источник

2017-07-18 06:42:23

-1

всем моим 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; 
}

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

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

источник

2017-10-12 00:41:04

ответ

Смежные вопросы