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

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设备。安卓：第一图像移上滚动的Windows：第一图像显示正确的，但是当我滚动超过其flikering 苹果第二图像：显示白色背景insted的图像，第二图像可见，但其对滚动flikering

来源

2017-02-14 Hiren Patel

你试过用img标签吗？ – 3bu1

@ 3bu1是的，我试过但没有工作 –

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

我也遇到过这个问题。我知道这个

3级可能的解决方法，你可以尝试使用伪元素和背景固定添加到它

2.可以使固定DIV内的另一个DIV。并添加背景到该div

使用-webkit-transform: translateZ(0x); transform:translateZ(0)给力的硬件加速

多看这里

让我知道，如果有帮助

来源

2017-02-14 09:49:36

感谢您的回复，但我找不到我的问题的解决方案 –

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

回答

相关问题