圖像上滾動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在移動設備上

回答

相關問題