視差滾動不適用於移動 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/