クロムのボーダー半径にエラーがあります

Question

ウェブサイトをプリロードするための簡単なアニメーションを作成しています。それは本当に簡単です。ここに私のコードは次のとおりです。

http://jsfiddle.net/sqxsf18b/

<div id="loader-wrapper"> 
    <div id="loader"> 

    </div> 
</div> 

#loader-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
} 


#loader { 

    display: block; 
    position: relative; 
    left: 50%; 
    top: 50%; 
    width: 150px; 
    height: 150px; 
    margin: -75px 0 0 -75px; 
    border-radius: 50em; 
    border: 3px solid transparent; 
    border-top-color: #3498db; 
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 

#loader:before{ 
    content: ""; 
    position: absolute; 
    top: 5px; 
    left: 5px; 
    right: 5px; 
    bottom: 5px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #e74c3c; 
    -webkit-animation: spin 3s linear infinite; 
    animation: spin 3s linear infinite; 
} 

#loader:after{ 
    content: ""; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    right: 15px; 
    bottom: 15px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #f9c922; 
    -webkit-animation: spin 1.5s linear infinite; 
    animation: spin 1.5s linear infinite; 
} 

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

それはjsfiddle作品で、とても奇妙だが、クロムにはしません。

border-radius属性は、＃loader.beforeと＃loader.afterで動作しますが、#loaderでは動作しません。私は非常に多くのソリューションを見てきましたが、誰も働きませんでした。 誰でもこれを解決できますか？

Answer 1

あなたのコードはChromeでうまく動作します。あなたは発生しているレンダリングの問題についてさらに情報を投稿できますか？

ボーダー半径を%と2つの内側円に指定した理由はありますか？親の場合はemですか？