仅在iOS设备上损坏的两个背景图像之一

Question

我完全被难住了。这个问题浪费了我太多的时间。

我有两个背景与视差滚动-工作‘几乎’完美。为手机网站增加响应性。如果我使用chromes移动模拟器，在每台设备上都能完美地工作。如果我在android手机上使用它，完美的.然而，在iOS上，第一个背景图像是可见的，而第二个背景图像是不可见的。你所看到的只有内容和白色背景。考虑到它们有相同的设置，这完全没有意义-我尝试过重命名图像，更改图像文件类型，使用与背景中相同的图像-1，但都不起作用。唯一值得注意的是，如果我完全删除了.background-1，那么.background-2的一小部分背景图像就会显示出来--尽管它的高度是100vh。

​

.background-1 {
  background-image: url("image1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: lighten;
  background-color: rgba(255, 255, 255, 0.2);
  height: 100vh;
  width: 100%;
  position: relative;
}

.background-2 {
  background-image: url("image2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: lighten;
  background-color: rgba(255, 255, 255, 0.2);
  height: 100vh;
  width: 100%;
  position: relative;
}

<div class="background-1"> </div>

<div class="information">This div contains some information.....</div>

<div class="background-2"></div>

​

Answer 1

在某种程度上，答案是图像现在是可见的。

参考：https://css-tricks.com/forums/topic/parallax-on-mobile/

添加背景附件: scroll；看起来很管用。