視差滾動不適用於移動css

Question

我的視差滾動不適用於android和iOS移動設備。該代碼適用於桌面，但不適用於移動設備，無論是任何瀏覽器。背景圖像不會滾動視差效果。您可以點擊此處查看https://dkpyk75z6sfdo.cloudfront.net/

這裏去的CSS代碼，

.home { 
background: url(assets/images/img1.jpg) no-repeat center center fixed; 
display: table; 
height: 100%; 
position: relative; 
width: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
#information { 
background: url(assets/images/b1.jpeg) no-repeat center center fixed; 
display: table; 
height: 100%; 
z-index: -1; 
position: relative; 
width: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
#information2 { 
background: url(assets/images/ab9.jpeg) no-repeat center center fixed; 
display: table; 
height: 100%; 
z-index: -1; 
position: relative; 
width: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
#information3 { 
background: url(assets/images/c4.jpg) no-repeat center center fixed; 
display: table; 
height: 100%; 
z-index: -1; 
position: relative; 
width: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

HTML代碼

<!-- first section - Home --> 
<div class="home"> 
<div class="centered"> 
<h1>PARALLAX WEB DESIGN</h1> 
</div> 
</div> 
<!-- /first section -->  

<!-- second section --> 
<div id="information"> 
<div class="centered"> 
     <h1>SECTION 1</h1> 
</div> 
</div> 
<!-- /second section --> 

等等

Answer 1

視差永遠不會正確地在移動設備上工作 - 在這裏也就是爲什麼。

移動瀏覽器旨在儘可能高效地運行，以節省電池壽命。他們這樣做的一個方法就是在滾動事件期間延遲JS執行。按照症狀，這將顯示爲視差不平行，而是在滾動完成後跳轉到新的位置。

我建議禁用所有視差一次到移動視口。

關於此主題的更多閱讀：http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/