在iOS上滚动时背景图像消失

Question

我目前正在开发一个主页上有背景图片的网站。这在我测试过的任何地方都很好，除了在我的iPad上。我在谷歌上搜索了一下，其他人似乎也有这个问题，但他们的解决方案都不适合我

以下是发生的事情的视频：https://file.garden/YqcddaVyGGEk7pAS/RPReplay_Final1661876702.mp4

我的代码如下：

background-image: 
linear-gradient(
rgba(0, 0, 50%, 25%),
rgba(0, 0, 50%, 25%)
),
url(/assets/img/home/background.jpg);

background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;

我知道background-image: fixed;不起作用，我需要修复的只是这种奇怪的滚动行为。

我尝试过删除background-image: fixed;，删除background-size: cover;，这两个都是以前的，并将文件转换为PNG，所有这些都是其他帖子中建议的，但都不起作用。理想情况下，如果可能的话，我想要一个非javascript解决方案。

感谢

编辑：

这是HTML:

<div class="container">
<section class="banner">
<div class="overlay">
<h1>Rutland Genie Tutoring</h1>
<p>Home and Online tutoring for maths and science, based in Rutland</p>
</div>
</section>
[...]
</div>

这是我的CSS：

.container > section.banner {
padding-left: 1em;
padding-right: 1em;
text-align: center;
font-size: xx-large;
padding: 20vh;
max-height: min-content;
width: 100%;

}
.container > section.banner > .overlay {
padding: 1em;
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.5);
width: fit-content;
margin: auto;
color: var(--home-banner-font-colour);
}

Answer 1

这里的主要问题之一是iOS移动设备在呈现background-size:cover;和background-attachment:fixed;时出错。

因此，一个简单的解决方案是使用媒体查询来更改移动设备上的background-attachment属性(屏幕宽度小于640px(：

在媒体查询中尝试此操作

@media (max-width:640px) {
section {
background-attachment:initial;
}
}