I have implemented an animation of body in my website. When you reload and first load the site the animation on top of the page happens for 300 ms. The animation is like a loading bar animation which shrinks to the middle. It works well in android and windows. For some unknown reason background-size property doesn't work correctly in IOS devices. The background-size is too big and weird looking. The animation goes away and page becomes visible after 300 ms that was set using setinterval method. As I don't know any easy fixing this and I care about UX I want to change the body background for IOS device only. This will disable the animation because body background was having the sizing animation using keyframes. I tried the method user agent navigator but didn't work. Please help me out if you know what is wrong.

CSS

body 
{
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
}

JAVASCRIPT

setInterval(function()  {      
   document.getElementById("Web_1920__1").style.visibility = "visible";
   document.body.style.background = "rgba(255,255,255,1)";  } var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; if (isIOS) { document.body.style.background = "rgba(0,0,0,1)"; console.log('This is an IOS device'); } else { console.log('This is Not an IOS device'); }

Website article link to check the animation on reload https://elomymelo.com/soundcore%20motion%20plus%20review.html Looks really weird on iphone on safari. How can I control the background for IOS ...? Is there anything overriding ..?