I have implemented the following CSS animations, which work perfectly on desktop browsers even when the window is resized.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #0e1624;
overflow-y: hidden;
overflow-x: hidden;
animation: enable-scroll 0.1s forwards;
color: white;
scroll-behavior: smooth;
}
@keyframes enable-scroll {
to {
overflow-y: auto;
}
}
#page-loader {
animation: page-loaded 0.3s ease-in-out forwards;
animation-delay: 2.5s;
}
@keyframes page-loaded {
to {
display: none;
}
}
Although these animations perform well on desktop, they do not run on my phone causing the content to stay hidden.
I am seeking advice on what could be causing this issue. Any insights?