MS Edge CSS анимация становится нервной, когда продолжительность варьируется

Question

В браузере MS Edge простая анимация вращения становится очень грубой, как только продолжительность анимации меняется. Вот простой пример:

#LogoRotator { z-index: 99; width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; border-top-color: #3498db; animation: spin 2s linear infinite; } 
 
#LogoRotator:before { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 50%; border: 1px solid transparent; border-top-color: #e74c3c; } 
 
#LogoRotator:after { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 1px solid transparent; border-top-color: #f9c922; } 
 
@keyframes spin { 100% { transform: rotate(360deg); } } 
 

 
#LogoRotator.varySpeed:before { animation: spin 3s linear infinite; } 
 
#LogoRotator.varySpeed:after { animation: spin 1.5s linear infinite; }

<p>With identical animation durations:</p> 
 
<div id="LogoRotator"></div> 
 

 
<p>With different animation durations:</p> 
 
<div id="LogoRotator" class="varySpeed"></div>

Если просмотреть этот фрагмент в Краю вы увидите, что, когда есть одинаковые анимации скорости движения очень гладко, но как только длительность меняется движение прыжки повсюду:

есть ли способ, чтобы сделать анимацию гладкой, когда длительность меняется?

Answer 1

Вы можете исправить это, поставив переполнение: hidden; в #LogoRotator, #LogoRotator: before и #LogoRotator: после