Rotate animation not working on Safari 9

Question

I have a rotate animation on a button in a form. The animation is working great on FF, Chrome and IE,... but not on Safari 9. I've try to use the all percent like suggested on another post but it didn't work.

Here's my work :

HTML:

<!-- LOGIN BUTTON -->
<button type="submit" class="btn btn-block btn-primary">
    <span ng-if="!login.processing">Login</span>
    <span ng-if="login.processing" class="spinner">
        <span class="glyphicon glyphicon-repeat"></span>
    </span>
</button>

CSS:

/* ANIMATIONS ====================== */ 
.spinner {
    -webkit-animation:spin 1s infinite linear;
    -moz-animation:spin 1s infinite linear;
    animation:spin 1s infinite linear;
}

@keyframes spin {
    0%          { transform:rotate(0deg); }
    50%         { transform:rotate(180deg); }
    100%        { transform:rotate(360deg); }
}

@-webkit-keyframes spin {
    0%          { -webkit-transform:rotate(0deg); }
    50%         { -webkit-transform:rotate(180deg); }
    100%        { -webkit-transform:rotate(360deg); }
}

@-moz-keyframes spin {
    0%          { -moz-transform:rotate(0deg); }    
    50%         { -moz-transform:rotate(180deg); }
    100%        { -moz-transform:rotate(360deg); }
}

I use Angular so don't worry about the directives in the HTML.

score 0 · Answer 1 · edited May 23 '17 at 12:07

As answered here css-transforms do not work on inline elements. It's suprising that this works in all browsers but Safari. Here is a possible workaround:

.spinner {
    -webkit-animation:spin 1s infinite linear;
    -moz-animation:spin 1s infinite linear;
    animation:spin 1s infinite linear;
    display: block;
    position: absolute;
    top: 7px;                  //adjust if needed
    left: calc(50% + 20px);    //adjust if needed       
}

jsfiddle with this solution

It may work only with 'inline-block' display like below, but I have no way of confirming that.

.spinner {
    -webkit-animation:spin 1s infinite linear;
    -moz-animation:spin 1s infinite linear;
    animation:spin 1s infinite linear;
    display: inline-block;
}

jsfiddle

Rotate animation not working on Safari 9

1 Answers1