背景附件:已修复，不适用于iOS [英] Background-Attachment: Fixed Doesn't Work On iOS

问题描述

我正在寻找解决方案，以解决iOS设备上背景固定的问题.我宁愿不必重新设计该网站的所有内容，并且希望某些CSS更改可以解决该问题. 这是该网站在iPhone上的外观，以及

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

我还尝试使用@media查询在stackoverflow上的一些帖子中针对iOS修复此问题，但这似乎没有任何作用:

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>

推荐答案

我刚刚遇到了同样的问题，这就是我解决的方法.

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

首先，您需要声明您的身体和html的宽度为100％，高度为100％:

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

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

然后，正文无法完成页面上的滚动:您必须将其包装在容器上.此容器需要三个参数:溢出:滚动，宽度:100％和高度: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;
	}

如果您不喜欢它的滚动方式，也可以尝试添加 -webkit-overflow-scrolling:触摸.

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

希望对您有帮助的人！

这篇关于背景附件:已修复，不适用于iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！