CSSを回転させて翻訳する

Question

現在SafariとCSS3の変換に関する非常に基本的な問題に直面しています。私は、画面の中央に灰色の円を配置し、それをアニメートしようとしています。

私の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が開いた状態または右）、その後、メイン1に戻ってきて、円はあなたがこれらの二つの絵に見ることができるように完璧に整列：

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

私はそれを行うには他にもたくさんの方法があると知っていますが、私はここで何がうまくいかないのか理解しています。誰かがこの問題を解決する方法を知っていますか？

ありがとうございました！

Answer 1

私は昨日iOSでSafariの問題に遭遇したので、あなたと私のソリューションを共有できると思った。

translate(-50%, -50%)をrotateと一緒に適用すると、iOSではtranslateプロパティは無視されました。 transform-originは役に立ちませんでした。

すべての可能な変形を試みた後、私は仕事をした1が見つかりました：

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

だから、（代わりの割合の）絶対値をため翻訳し、問題を解決しました。これがあなたにも役立つことを願っています！