When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have already attempted using overflow:scroll; and -webkit-overflow-scrolling:touch but the issue persists. Whenever I attempt to scroll, I encounter a blank image, and if I scroll back up, the text reappears. Visit the website here
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
font-family: 'Poppins', sans-serif;
}
body
{
overflow-x: hidden;
}
.banner
{
position: relative;
width: 100%;
height: 100vh;
background: #3475ca;
display: flex;
justify-content: center;
align-items: center;
}
.banner img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.25;
}
.content
{
position: relative;
max-width: 750px;
text-align: center;
}
.content h2
{
color: #fff;
font-size: 60px;
}
<body>
<section class="banner">
<header>
<a href="#" class="logo">Brand Name</a>
<div class="toggle"></div>
</header>
<img src="https://cdn.glitch.global/4aea147e-dfa7-4bb5-b6b1-92c06733000c/bg.jpg?v=1653905576692">
<div class="content" data-0-top="opacity:0;left:100px;" data-200-top="opacity:1;left:0px;" >
<h2>Success by Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut.
</p>
</div>
</section>
Explore the site further here