see the problem here:
https://drive.google.com/file/d/1WkTjEuMzF_r4HZjSv-781npn4cz4mKA2/view?usp=sharing (https://i.sstatic.net/KpaZEBGy.jpg
ignore the glitch property i commented it
<div class="loaderr">
<div class="loader-bg"></div>
<img src="assets/images/load-star.svg" alt="">
</div>
/* Home Loader */
.loaderr {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
transition: all 0.3s;
opacity: 1;
pointer-events: all;
display: flex;
justify-content: center;
align-items: center;
}
.loader-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: #fff;
border-radius: 0px;
z-index: -1;
transition: all 1.3s;
transform: scale(1);
}
.loaderr img {
width: 100%;
max-width: 116px;
display: block;
object-fit: contain;
/* filter: url(#feaute-demo-filter-3); */
}
/* Home Loader End */
.load-layer {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
transition: all 0.2s;
opacity: 1;
pointer-events: all;
}
.load-layer.hidden {
opacity: 0;
pointer-events: none;
}
if (document.querySelector(".loaderr")) {
gsap.matchMedia().add("(min-width: 1024px)", () => {
homeLoadTl.to(".loader-bg", {
height: "304px",
width: "110px",
borderRadius: "10px",
ease: "none",
duration: 1,
delay: 1,
onComplete: () => {
loadIGlitch()
},
})
});
gsap.matchMedia().add("(max-width: 1023px)", () => {
homeLoadTl.to(".loader-bg", {
height: "186px",
width: "67px",
borderRadius: "10px",
ease: "none",
duration: 1,
delay: 1,
onComplete: () => {
loadIGlitch()
},
})
});
I want the same animation but in some iphones users are facing this problem,
check the site : https://orbital.frototype.agency/
we have tried by clearing cache and doing hard reload even cleared complete data of browser but still facing.