Background-Attachment: Fixed Doesn't Work On iOS

问题

I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. This is what the site looks like on iPhones, and this is what it should look like. The CSS code I'm using is as follows:

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

I've also tried using a @media query to fix it for iOS using some posts on stackoverflow, but this didn't seem to have any effect:

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

回答1:

I just went through the same issue, and this is how I solved it.

First, you need to declare your body and html to be 100% wide and 100% tall:

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

Then, the scrolling on your page can NOT be done by the body: you must wrap it on a container. This container needs three parameters: overflow:scroll, width: 100% and height: 100%. I recommend wrapping the entire site in it:

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

If you don't like how it scrolls, you can also try adding -webkit-overflow-scrolling: touch.

Hope that helps you/whoever comes looking for this!

回答2:

To all my div with fixed background I add the classes class="parallax iparaxify paraxify" And in my main css file I have:

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

And finally make it parallax for everything except i products

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

At the end deactivate position:fixed for ipad, iphone and ipod with 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');
}
});

来源：https://stackoverflow.com/questions/41436892/background-attachment-fixed-doesnt-work-on-ios

标签

html

ios

css

iphone

background-attachment