Question

body{

background-color: #000;

height: 100vh;

}

section {
  width: 100%;
  height: 100%;
}

#section1 {
  background-color: #f0f0f0;
}

#bubbles1, #bubbles2{
width: 100%;
height: 100%;
top: 0;
left: 0;

z-index: -1;
}

#bubbles1{
  background: url('img/greencat.png') 60% 50% no-repeat fixed;
  background-color: #f0f0f0;
  
 
}

#bubbles2{
background: url('img/catb.png') 60% 50%  no-repeat fixed;

position: fixed;
-webkit-backface-visibility: hidden;

}

#fish{

background: transparent url('img/textgreen.png') no-repeat bottom left fixed;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
}
#fish1{

background: transparent url('img/textblue.png') no-repeat bottom left fixed;
    height: 100%;
    width: 100%;
   /* position: absolute;*/
    top: 0px;
}


@media screen and (max-width: 860px){


ound-image: url('img/greencat-mobile.png');
    background-size: 250vw 100vh;
    background-position: 53% 50%;
  }

  #bubbles2{
    background-image: url('img/catb-mobile.png');
 
    background-size: 250vw 100vh;
    background-position: 53% 50%;
    position: fixed;
    -webkit-backface-visibility: hidden;

  }
  #fish{
    background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/06/Barnsley-House-Spa-2-844x800.jpg') no-repeat 3% 78% fixed;
    position: absolute;
   }
  #fish1{
    background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/08/Fairmont-Pittsburgh-30-844x800.jpg') no-repeat 3% 78% fixed;
  }


}

<section id="section1">
  <div id="bubbles1"></div>
  <div id="fish"></div>
</section>
<section id="section2">
  <div id="bubbles2"></div>
  <div id="fish1"></div>
</section>

这是我的html和css，问题是当我在移动设备上滚动比图像是flikering，而不是坚持固定位置。我在css中给出了固定的位置，但它不起作用。我检查了Android，Windows和Apple设备。 Android：第一张图片在滚动时向上移动 Windows：第一个图像显示正确但当我滚动第二个图像而不是它的flikering Apple：显示图像的白色背景，第二个图像可见，但在滚动上不适用

Answer 1

大多数移动设备在滚动具有固定背景的页面后都会延迟更新背景位置。

我也遇到过这个问题。我知道3个可能的修复

1。您可以尝试使用伪元素并添加固定的背景

2. 你可以在固定div中创建另一个div。并为该div添加背景

3. 使用-webkit-transform: translateZ(0x); transform:translateZ(0)强制加速硬件

在此处查看更多

让我知道是否有帮助

图像是在移动设备上滚动的flikering

1 个答案: