Круговая шкала анимации Хром ошибка с преобразованиями CSS

Question

У меня есть некоторые проблемы с простой анимацией в Chrome. Я работаю над очень простым предварительным загрузчиком, который состоит из круга, который увеличивает его размер во времени. Это как I'm создание этого:

#circle{ 
position:absolute; 
    display:block; 
     width:40px; 
    height:40px; 
     background:#000; 
    top:50%; 
    left:50%; 
    margin:-20px 0 0 -20px; 

    -webkit-border-radius:50%; 
    -khtml-border-radius:50%; 
     -moz-border-radius:50%; 
      border-radius:50%; 

    -webkit-transform:scale(0.3); 
     -moz-transform:scale(0.3); 
     -ms-transform:scale(0.3); 

    -webkit-animation:loading 1.5s ease-out forwards infinite; 
     -moz-animation:loading 1.5s ease-out forwards infinite; 
     -ms-animation:loading 1.5s ease-out forwards infinite; 
} 

И это анимация:

@-webkit-keyframes loading { 
    0%{-webkit-transform:scale(0.3);} 
    50%{-webkit-transform:scale(1);} 
    100%{-webkit-transform:scale(0.3);}  
} 

И вот результат, где обрезной являются вырезанные от только на Chrome. Safari, используя webkit, тоже отлично это делает. (Обратите внимание на разрез на верхней и левой сторон)

И некоторые последний вопрос, связанный. Как вы планируете графический резерв для IE? Я имею в виду, я мог бы попросить модернизацию и создать резервную копию, удалив это и добавив графику JS. Но я хотел бы лучше узнать, используя только CSS.

Анимация не работает на IE, поэтому идея будет удалять черный круг и добавлять на его место анимированный preloader gif.

Надеюсь, вы справте с этим, потому что это дает мне сумасшедший!

Большое спасибо!

Answer 1

Похоже, что его спрятал контейнер.

Попробуйте это:

#circle { 
    margin:-19px 0 0 -19px; 
}