CSSのキーフレームアニメーションがIEとEdgeで意図したとおりに機能しない

Question

私はこのアニメーションを作ったが、IEとEdgeを除くすべてのブラウザで魅力的なように機能している。あなたは、IEではここhttps://jsfiddle.net/03ddygdx/

.progress-container { 
    position: relative; 
} 

.background-progress-bar, .progress-bar { 
    width: 100%; 
    height: 10px; 
    top: 0px; 
    left: 0px; 
    position: absolute; 
} 

.background-progress-bar { 
    background-color: pink; 
    z-index: 8; 
} 

.progress-bar { 
    background-color: red; 
    z-index: 9; 
} 

.indeterminate { 
    animation: indeterminate 2.5s infinite linear; 
} 

@keyframes indeterminate { 
    0% { 
    width: 30%; 
    left: 0%; 
    } 
    25% { 
    width: 50%; 
    left: 50%; 
    } 
    50% { 
    width: 10%; 
    left: 0px; 
    } 
    75% { 
    width: 30%; 
    left: 0%; 
    } 
    100% { 
    width: 0%; 
    left: calc(100% - 5px); 
    } 
} 

<div class="progress-container"> 
<span class="background-progress-bar"> 
    <span class="progress-bar indeterminate"></span> 
</span> 
</div> 

ページを見ることができるとエッジは左に常にスパンを残して、左のプロパティを適用しません。私は、-ms-animationプロパティを試しましたが、それも動作しません。

私が私のindex.html

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Answer 1

編集にこのメタタグを得た事項の場合：OK、問題は左属性のサイズを計算するために）（計算値を追加されたので、バグがそこにあります。

編集2：私はあなたのために壁に頭を打った後、ここhttps://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907/

を、それをチェックアウトすることができると思い、それについての情報がそこにあるので、もし私は、この特定のケースについてのバグレポートを作成しましたカップルの時間は、それがie-edgeのバグでなければならないことが分かります。これにキーフレームを変更すると私の問題は解決しました。ここで

@keyframes indeterminate { 
    0% { 
    width: 30%; 
    margin-left: 0%; 
    } 
    25% { 
    width: 50%; 
    margin-left: 50%; 
    } 
    50% { 
    width: 10%; 
    margin-left: 0px; 
    } 
    75% { 
    width: 30%; 
    margin-left: 0%; 
    } 
    100% { 
    width: 0%; 
    margin-left: 100%; 
    } 
} 

はそう単純マージン左放置変わり、私はこれらのブラウザはトラブルアニメーションの左の値を適用してい推測すなわち、エッジの例に取り組んでhttps://jsfiddle.net/vwty99s9/1/

であり、あなたが行ってもいいです。