CSS旋轉和翻譯問題

我目前面臨着Safari和CSS3轉換可能非常基本的問題。我正試圖在屏幕中心對齊一個灰色圓圈，然後爲其設置動畫。CSS旋轉和翻譯問題

我的CSS代碼似乎可以與任何其他瀏覽器完美配合，但圓形在Safari中並不能很好地對齊。但是，如果我搬出動畫一切順利。這就是爲什麼我想什麼是錯我的代碼：

#loading_container{ 
 
    width:100%; height:100%; 
 
    background-color: #26262B; 
 
    position: absolute; 
 
} 
 

 
#loading_container>img{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width:20%; height:auto; 
 
    min-width: 200px; 
 
    -ms-transform: translate(-50%,-50%); 
 
    -webkit-transform: translate(-50%,-50%); 
 
    -moz-transform: translate(-50%,-50%); 
 
    -o-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
    -webkit-animation: rotate 5s infinite; 
 
      animation: rotate 5s infinite; 
 
} 
 

 
@-webkit-keyframes rotate { 
 
    from {-webkit-transform: translate(-50%,-50%) rotate(0deg);transform: translate(-50%,-50%) rotate(0deg);} 
 
    to {-webkit-transform: translate(-50%,-50%) rotate(-360deg);transform: translate(-50%,-50%) rotate(-360deg);} 
 
} 
 

 
@keyframes rotate { 
 
    from {-webkit-transform: translate(-50%,-50%) rotate(0deg);transform: translate(-50%,-50%) rotate(0deg);} 
 
    to {-webkit-transform: translate(-50%,-50%) rotate(-360deg);transform: translate(-50%,-50%) rotate(-360deg);} 
 
}

<div id="loading_container"> 
 
    <img src="http://s32.postimg.org/721vouc3p/loading_icon.png" alt="Loading..."/> 
 
</div>

最奇怪的是，如果我移動到另一個桌面上的我的MAC（我的意思是，如果我向左滾動或右），然後再回到一個主要使用Safari打開，圓對齊完美，你可以在這兩張照片看到：

This is the result when the page has been loaded... And this is when I move back to the main desktop without having done anything else

我知道還有很多其他方法可以做到，但我只會明白這裏可能出現什麼問題。有人有一個想法如何解決這個問題？

謝謝你的幫助！

來源

2016-06-13 vesna

你有沒有試過設置'transform-origin：center center'？ ...此外，發佈一個工作代碼片段，所以我們有一些工作與 – LGSon

更新與圖像以及現在很難看到它如何動畫 – LGSon

我剛剛做到了 – vesna

昨天我在iOS上偶然發現了Safari的一個問題，所以我想我可以與你分享我的解決方案。

當將translate(-50%, -50%)與rotate一起應用時，iOS上的translate屬性被忽略。 transform-origin沒有幫助。

嘗試所有可能的變化後，我發現了一個沒有工作：

$size: 50px; 
transform: translate(-$size/2, -$size/2) rotate(0deg);

所以絕對值（而非百分比）爲翻譯解決了這個問題。希望這也能幫助你！

來源

2016-08-09 07:41:25 afkatja

您其實是對的，它就像一個魅力！謝謝！ – vesna

CSS旋轉和翻譯問題

回答

相關問題