Website works fine on Desktop. But whenever I open it on mobile and try to scroll down only the text moves away and the Page stops. Website uses skrollr core to use animation. Already tried to use overflow:scroll; and -webkit-overflow-scrolling:touch Whenever I scroll I am left with a blank Image, and if I scroll backwards the text will appear again. https://test-bau.glitch.me
*
{
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>
Probably skrollr.js causing the problem. The library has not been under active development since 2014.
I can suggest https://scrollrevealjs.org/ or https://michalsnik.github.io/aos/