there are some strange lines on some of the IOS phones, when my website is loading

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.