iOS Safari pauses animation on window.location.href = ...?

Question

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";        
}

score 1 · Answer 1 · answered May 15 '19 at 22:41

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.

answered May 15 '19 at 22:41

joshmoto

4,472
1
26
45

Have you tried increasing the timeout as test? Like try a second.. `1000` – joshmoto May 15 '19 at 23:04
Yeah I even tried 5000. See Javascript section added above. – user1946932 May 15 '19 at 23:07
See Javascript section added above. I just tested on iPad Pro 11 inch Safari and iPhone 10S Max Safari. – user1946932 May 15 '19 at 23:13
I've just tried this on iPhone 6s and works fine https://app.joshmoto.wtf/test.php but the progress bar only makes it 50% across when using time out 1000. Are you trying to get a perfect full animation from left to right before jumping to the next page? – joshmoto May 15 '19 at 23:46
Yes. We are wanting it to go round and round until the next page is returned. Sometimes that could take for example up to 5 seconds if the mobile phone user is on 3G or 4G or they have slow wifi, or the server is busy etc. – user1946932 May 15 '19 at 23:53
https://app.joshmoto.wtf/test.php i've adjusted the timeout to match your animation at 2.1s. This runs one complete animation of your loader bar before attempting the redirect, and should continue animating if the request takes longer. Seems to work on my iphone. – joshmoto May 16 '19 at 00:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/193435/discussion-between-joshmoto-and-user1946932). – joshmoto May 16 '19 at 00:20
The way I understand it, this just adds a delay. There must be a better way to do this. – MeSo2 Jan 20 '23 at 17:33

iOS Safari pauses animation on window.location.href = ...?

1 Answers1

Linked