视差滚动不适用于移动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

Parallax永远不会在移动设备上正常工作 - 这就是原因所在.

移动浏览器旨在尽可能高效地运行,以节省电池寿命.他们这样做的一种方式是他们在滚动事件期间延迟JS执行.对称地,这将显示为视差而不是视差,而是在滚动完成后跳到其新位置.

我建议一旦禁用所有视差到移动视口.

有关此主题的进一步阅读:http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/