MSエッジCSSアニメーションの時間が変動するとジッターが発生する

Question

MSエッジブラウザでは、単純な回転アニメーションはアニメーションの期間が変わるとすぐに非常に粗くなります。ここでは簡単な例です：

#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

オーバーフローを非表示にすることで修正できます。 #LogoRotator、#LogoRotator：beforeおよび#LogoRotator：

の後