旋轉動畫無法在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); }
}

我使用Angular，所以不用擔心HTML中的指令。

Answer 1

正如這里回答的那樣， css轉換不適用於內聯元素。 令人驚訝的是，這適用於除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這個解決方案

它可能僅適用於“內嵌式”顯示，如下所示，但我無法確認。

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

jsfiddle