Поворот анимации, не работающей на Safari 9

Question

У меня есть анимация вращения на кнопке в форме. Анимация отлично работает на FF, Chrome и IE, но не на Safari 9. Я пытаюсь использовать все проценты, как предлагалось на другом посту, но это не сработало.

Вот моя работа:

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

Я использую Угловое, так что не беспокойтесь о директивах в HTML.

Answer 1

Как ответил here css-transforms не работают на встроенных элементах. Удивительно, что это работает во всех браузерах, кроме Safari. Вот возможный обходной путь:

.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

Он может работать только с «встроенным блоком» дисплеем, как показано ниже, но у меня нет никакого способа подтверждения того, что.

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

jsfiddle