iOS Safari pauses animation on [removed].href = …?

问题:

I have the following code from https://codepen.io/anon/pen/ZNLyGe which displays an waiting-bar animation when the user clicks an icon to navigate to another part of the same website.

The onclick Javascript uses:

window.location.href = strNewURL;

It works fine on desktop browsers but on iOS, Safari freezes the animation as soon as it hits the window.location.href line.

Is there some way to prevent iOS Safari from stopping that animation?

HTML

<div class="dvProgressBarInfinite" id="dvIDProgressBarInfinite">
    <div class="indeterminate"></div>
</div>

CSS

/* Progress Bar */
.dvProgressBarInfinite {
    position: absolute;
    height: 2px;
    display: block;
    width: 100%;
    background-color: #cfcfcf;
    border-radius: 2px;
    background-clip: padding-box;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden;
}

.dvProgressBarInfinite .indeterminate {
    background-color: #000000;
}

.dvProgressBarInfinite .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.dvProgressBarInfinite .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

JAVASCRIPT

function fJToolbar2Click(intColumnNumber)
{
    var strURL = "<%=strClsToolbar2URLPrefix%>";
    var strURLSuffix = "";

    switch(intColumnNumber) {
        case 1:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(1)%>';
            break;
        case 2:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(2)%>';
            break;
        case 3:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(3)%>';
            break;
        case 4:
            strURLSuffix ='<%=strClsToolbar2ClickURLsTarget(4)%>';
            break;
        };

    fJProgressIndeterminateShow();

    setTimeout(function (){
    window.location.href = strURL + strURLSuffix;  
    }, 200);        

}    

function fJProgressIndeterminateShow()
{       
   var dv1 = document.getElementById("dvIDProgressBarIndeterminate");
   dv1.style.display="inline-block";        
}

回答1:

I used this in the end which worked for me nicely in 'save to home screen' iOS webapp/site.

setTimeout(function(){
    window.location.href = strNewURL;
}, 200);

I probably stumbled across this question at the time Why isnt window.location.href= not forwarding to page using Safari?

See it working for me here https://dev.joshmoto.wtf/unearth.ed/wp/ ...I'm guilty of not preloading fontawesome spinner so sometimes the spinner does not render in time before skipping to next page. But your animation is pure css so should not be a problem.