Parallax scrolling not working on mobile css

Question

My parallax scrolling is not working on mobile devices, both android and iOS. The code works great for desktop but not for mobile, be it any browser. Background images are not scrolling in parallax effect. You can check it here https://dkpyk75z6sfdo.cloudfront.net/

Here goes the CSS code,

.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 code

<!-- 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 -->

And so on

Korgrue · Accepted Answer · 2017-06-07 15:28:52Z

16

Parallax will never work properly on mobile devices - and here is why.

Mobile browsers are designed to function as efficiently as possible in order to save on battery life. One way that they do that is that they delay JS execution during a scroll event. Symptomatically this will display as the parallax not parallaxing but rather jumping to its new position after scroll completes.

I recommend disabling all parallax once down to mobile viewport.

Further reading on this topic: http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

answered Jun 7, 2017 at 15:28

Korgrue

3,4781 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Riya Jain Over a year ago

Thank you @Korgrue!

Ted Brownlow Over a year ago

Looks like the link is dead.

Altimus Prime Over a year ago

It's 2023. This shouldn't be the case any more.

Alex TechNoir Over a year ago

Updated link: github.com/suning-wireless/Pocket/issues/7

Collectives™ on Stack Overflow

Parallax scrolling not working on mobile css

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related