javascript - Web application not loading fully on iphone5s

Question

I have created a web application, That runs a preloader before displaying content on the page and the preloader is a full screen view with basic content like loading on it. Here is the code I'm using for the preloader

$(document).ready(function(){
    setTimeout(function(){
       $('.loader-main').addClass('loader-inactive');
    },0)   
});

My loader div looks like this

    <div id="page-preloader">
        <div class="loader-main">
            <div class="container">
              Loading content
            </div>
           *some image here*
        </div>
    </div>

and the style for the loader both active and inactive state

    .loader-main{
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        z-index:999;
        width: 100%;
        height: 100%;
        background:linear-gradient(45deg,#ffd5f5,#ffffff, #ffd5f5);
        will-change: opacity;
        transition:all 250ms ease; 
    }
    .loader-active{
        will-change: opacity;
        transition:all 350ms ease;
        opacity:1!important;
    }
    .loader-inactive{
        will-change: opacity;
        transition:all 250ms ease;
        opacity:0!important;
        pointer-events: none!important;
    }     

This works perfectly on the following tested devices:

Windows, Mac, Android (chrome), iphone8, iphone6s. But while testing on iphone5s, It keeps the loading view on and never fades out, however other contents of the page can be seen since the loader has an opacity of 80%,

I've made researches but can't find any thing, Removed the preloader and it worked fine on the iphone5s, However we can't have the App without a preloader.

标签： javascriptjquerywebweb-applications