He implementado una animación de cuerpo en mi sitio web. Cuando vuelve a cargar y carga el sitio por primera vez, la animación en la parte superior de la página ocurre durante 300 ms. La animación es como una animación de barra de carga que se reduce a la mitad. Funciona bien en Android y Windows. Por alguna razón desconocida, la propiedad de tamaño de fondo no funciona correctamente en los dispositivos IOS. El tamaño del fondo es demasiado grande y tiene un aspecto extraño. La animación desaparece y la página se vuelve visible después de 300 ms que se configuró usando el método setinterval. Como no sé cómo arreglar esto fácilmente y me importa UX, quiero cambiar el fondo del cuerpo solo para el dispositivo IOS. Esto deshabilitará la animación porque el fondo del cuerpo tenía la animación de tamaño usando fotogramas clave. Probé el navegador del agente de usuario del método pero no funcionó. Por favor, ayúdame si sabes lo que está mal.

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'); }

Enlace del artículo del sitio web para ver la animación al recargar https://elomymelo.com/soundcore%20motion%20plus%20review.html Se ve muy raro en el iPhone en un safari. ¿Cómo puedo controlar el fondo para IOS...? ¿Hay algo que anule ..?