CSS Transform (Spin Animation) Glitching In Safari (iOS)-CodePudding

I have a loader on my website which is basically a logo spinning in 3D for a few seconds until the page is loaded. The loader works perfectly in all major browsers on android and Windows but, it glitches badly on iOS (in both Safari and Chrome).

Glitch in Chrome on iPhone Glitch in Safari on iPhone

HTML:

<div id="loader">
    <div id="loader_spin_div" >
        <img  id="loader_spin" src="assets/img/Logo_329x329.webp" width="500"
        height="500" alt="Refresh Your Browser To See The Animation!">
    </div>
</div>

CSS:

#loader {
    background: #ff9472;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
}

#loader_spin {
    animation: spin 1.5s linear infinite;
    border: 2px solid #fff;
    border-radius: 150px;
    display: block;
    -webkit-box-shadow: 11px -3px 48px 5px #fff;
    box-shadow: 11px -3px 48px 5px #fff;
    transform: rotateY(45deg);
}

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(179deg);
    }
    100% {
        transform: rotateY(1deg);
    }
}

#loader_spin_div {
    width: 18vh;
    margin: auto;
    margin-top: 18vh;
}

@media (min-width: 440px) {
    #loader_spin_div {
        width: 27vh;
    }
}

I tried changing the layering (z-index of the elements), which I read in another article.

CodePudding user response：

Safari thinks in a real 3D space. The rotating image will go "through" the pane while rotating and half of it will not be visible. You will have to "lift" the parent container of the spinning image above the pane.

Bonus Tip: If you set the "perspective" you will get a real 3D effect.

See the following example - this will work in Safari:

#loader {
    background: #ff9472;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    
}

#loader_spin {
    animation: spin 1.5s linear infinite;
    border: 2px solid #fff;
    border-radius: 150px;
    display: block;
    -webkit-box-shadow: 11px -3px 48px 5px #fff;
    box-shadow: 11px -3px 48px 5px #fff;
    transform-origin: center center;
}

@keyframes spin {
    0% {
        transform: rotate3d(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}

#loader_spin_div {
    width: 18vh;
    margin: auto;
    margin-top: 18vh;
    transform: translateZ(100px) perspective(300px);
    transform-style: preserve-3d;
    
}

@media (min-width: 440px) {
    #loader_spin_div {
        width: 27vh;
    }
}

<div id="loader">
    <div id="loader_spin_div" >
        <div  id="loader_spin">
          The world goes round and round!        
        </div>
    </div>
</div>